代碼配置優(yōu)化 optimization
tree shaking(搖樹)
搖掉代碼中未引用的部分产还，在webpack中配置如下
···
module.exports = {
……,
optimization : { // 集中配置webpack內(nèi)部優(yōu)化功能
usedExports: true, // 只輸出外部使用的成員
minimize: true // 開啟壓縮
}
}
···
minimize:相當(dāng)于清除枯樹葉
useexports:相當(dāng)于標(biāo)記枯樹葉
合并模塊
通過concatenateModules屬性配置剪决，盡可能的將多的模塊合并到一個模塊中
module.exports = {
……,
optimization : { // 集中配置webpack內(nèi)部優(yōu)化功能
usedExports: true, // 只輸出外部使用的成員
concatenatemodules: true // 合并盡可能多的模塊
}
}
- 提取公共模塊
在optimization中設(shè)置splitChunks對象观话，把組件單獨(dú)打包粪般，UI庫單獨(dú)打包和庫文件單獨(dú)打包 - 動態(tài)導(dǎo)入
按需加載察纯，提高應(yīng)用響應(yīng)效率秧秉，通過import()方法引入 - MiniCssExtractPlugin插件
MiniCssExtractPlugin提取打包后的css,實(shí)現(xiàn)CSS樣式按需加載 - optimize-css-assets-webpack-plugin
壓縮提取的CSS文件 - 輸出文件名
- hash 整個項(xiàng)目級別的褐桌，有變化就變化
- chunhash:同一路的打包都是一樣的
- contenthash 文件級別的hash值，不同的文件就有不同的hash值
壓縮js文件
使用uglifyjs-webpack-plugiin將js壓縮象迎，減少打包js的文件大小
壓縮Html
使用html-webpack=plugin對html進(jìn)行壓縮
CDN加載
庫文件進(jìn)行CDN加速
