减少打包的时间
//设置
exclude:/node_modules/
happyPack可以将loader同步执行转为并行
可以将特定的类库提前打包然后引入,减少打包类库的次数。只有类库更新才会重新打包
代码压缩 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'
“build”: “webpack --mode production”