webpack对代码的优化
减少打包的时间
- 优化loader
//设置
exclude:/node_modules/
- HappyPack
happyPack可以将loader同步执行转为并行
- DllPlugin
可以将特定的类库提前打包然后引入,减少打包类库的次数。只有类库更新才会重新打包
代码压缩 Uglyfy
Mode 设置为production
module.exports = {
mode: 'production'
};
代码分割 以lodashJS 为例子
-
externals -----除了自己写的业务代码,其他的第三方的文件都单独抽离出来
在webpack 的config文件中写入
externals:{ lodash:'window_' }
-
Entry points
最简单最直观的方式,在webpack配置中
entry
字段中增添新的入口要新建一个js文件 引一下lodash,然后暴露出去
/**lodash.js **/ const _ = require('lodash') window._ = _ module.exports = _ /**webpack.config.js **/ entry:{ lodash:path.resolve(__dirname,'../src/lodash.js') app:path.resolve(__dirname,'../src/app.js') }
-
SpliteChunks
Optimization
//**webpack.config.js**
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async',//all async in
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
Tree shaking 工具 webpack-bundle-analyzer 追踪代码大小
tree shaking es模块 使用方法:
-
只有用import引入的,而且用了解构才能触发, 因为只有esm支持静态分析
-
再就是模块也得是用这种方式导出的,一般的package中如果有module字段,那么就是esm的入口
module:'dist/vue.runtime.esm.js'
- scripts 使用treeshaking只需要加一个mode production
“build”: “webpack --mode production”