Open py-tofee opened 3 years ago
// 判断生产环境
if (process.env.NODE_ENV === 'production') { // npm run build 时
if (process.env.npm_config_report) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end()
}
}
在vue中,执行 npm run build --report时,在全局process.env中新增了一个属性 npm_config_report 为 true,所以会调用BundleAnalyzerPlugin;
优化loader配置 loader处理文件比较耗时,所以要让尽可能少的文件被loader处理
{
test: /\.js$/,
use: [
'babel-loader?cacheDirectory' ,// 开启转换结果缓存
],
include: path.resolve(__dirname, 'src'), // 只对src目录中文件采用babel-loader
exclude: path.resolve(__dirname,' ./node_modules'), // 排除node_modules目录下的文件
}
babel-loader支持cacheDirectory选项,默认为false;如果设置为true,那么转换的结果将会被缓存起来;当webpack再次编译时,会先尝试从缓存中读取转换结果,以避免资源浪费;
优化resolve.extensions配置 在导入没有文件后缀的路径时,webpack会自动带上后缀去尝试 询问 文件是否存在,而resolve.extensions用于配置尝试后缀列表;为了减少尝试次数和匹配时间,频率出现高的文件后缀应放在最前面,优先匹配;
配置resolve.alias别名,缩短webpack查找路径;webpack查询模块时,直接根据别名对应的目录去查找模块,减少了webpack自己去按目录查询模块的时间
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': './src'
}
}
在webpack进行打包时,对于某些依赖的第三方库,如'vue', 'vue-router', 'vuex', 'axios', 'element-ui', 'lodash'等,不会修改和升级的库,可以让它和业务代码分开打包;
{
entry: {
// 需要提取的库文件
vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui', 'lodash']
},
output: {
path: resolve(dllPath),
filename: '[name].dll.[hash:8].js',
// vendor.dll.js中暴露出的全局变量名
// 保持与 webpack.DllPlugin 中名称一致
library: '[name]_[hash]'
},
plugins: [
// manifest.json 描述动态链接库包含了哪些内容
new webpack.DllPlugin({
path: resolve(dllPath, '[name]-manifest.json'),
// 保持与 output.library 中名称一致
name: '[name]_[hash]',
context: process.cwd()
})
]
}
注意:DllPlugin和output.library中的name必须保持一致,因为DllPlugin的name参数影响 manifest.json中的name,而 webpack.pro.config.js 中的 DllReferencePlugin 会读取manifest..json中的name,并将这个name作为从全局变量中获取动态链接库内容的变量名;
splitChunks:
splitChunks: {
cacheGroups: {
commons: {
name: 'commons',
chunks: 'initial',
// minChunks表示,如果一个模块的共享次数(重复加载次数)大于等于2,那么这个模块将被拆分成一个单独的bundle,避免重复打包
minChunks: 2 // minChunks的值必须大于等于1
}
}
}
参考链接
HMR:Hot Module Replacement
优点:不刷新浏览器的前提下,更新页面,保存页面的状态,提升开发效率;
启动:"start": "webpack-dev-server --hot --open"
sockjs:webpack-dev-server中的一个依赖库
require.context
API可以用于动态引入某个目录下的所有文件require.context(
directory,
(useSubdirectories = true),
(regExp = /^\.\/.*$/),
(mode = 'sync')
);
style-resources-loader 可以自动导入less等预处理器的公共样式变量,避免在每个样式文件中手动@import导入
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
resolve('src/assets/variables.less'),
resolve('src/assets/function.less')
]
}
}
svg-sprite-loader可以将常用的多个svg图标,拼接成 雪碧图,当夜页面中使用svg-icon时,就不需要通过svg的URL导入了
src/icons目录下有多个svg图片
a.svg: <svg>{{省略的icon path}}</svg>
b.svg: <svg>{{省略的icon path}}</svg>
...
使用svg-sprite-loader之后,变成一个svg图片
<svg>
<symbol class="icon" viewBox="0 0 1024 1024" id="a-icon">{{省略的icon path}}</symbol>
<symbol class="icon" viewBox="0 0 1024 1024" id="b-icon">{{省略的icon path}}</symbol>
</svg>
定义一个全局vue组件<SvgIcon>,iconName指向symbolId,就可以复用对应symbol的图片啦
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
在src/icons目录下,新建一个index.js文件,使用require.context动态引入所有svg图片,
try {
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
} catch (e) {
// ignore
console.warn('load svg icons error.')
}
plugins: [
new webpack.BannerPlugin(`bulid time: ${moment().format('YYYY-MM-DD HH:mm:ss')}`),
// 配置全局常量,可以在代码中使用
new webpack.DefinePlugin({
'process.env.CFG': JSON.stringify(process.env.CFG),
'modeFlag': JSON.stringify(process.env.modeFlag)
}),
// 自动加载配置的模块,在使用时不需要再导入
new webpack.ProvidePlugin({
_: 'lodash'
})
]
plugins 插件
webpack-dev-middleware
wepack-hot-middleware