代码配置优化 optimization
tree shaking(摇树)
摇掉代码中未引用的部分，在webpack中配置如下
···
module.exports = {
……,
optimization : { // 集中配置webpack内部优化功能
usedExports: true, // 只输出外部使用的成员
minimize: true // 开启压缩
}
}
···
minimize:相当于清除枯树叶
useexports:相当于标记枯树叶
合并模块
通过concatenateModules属性配置，尽可能的将多的模块合并到一个模块中
module.exports = {
……,
optimization : { // 集中配置webpack内部优化功能
usedExports: true, // 只输出外部使用的成员
concatenatemodules: true // 合并尽可能多的模块
}
}
- 提取公共模块
在optimization中设置splitChunks对象，把组件单独打包，UI库单独打包和库文件单独打包 - 动态导入
按需加载，提高应用响应效率，通过import()方法引入 - MiniCssExtractPlugin插件
MiniCssExtractPlugin提取打包后的css,实现CSS样式按需加载 - optimize-css-assets-webpack-plugin
压缩提取的CSS文件 - 输出文件名
- hash 整个项目级别的，有变化就变化
- chunhash:同一路的打包都是一样的
- contenthash 文件级别的hash值，不同的文件就有不同的hash值
压缩js文件
使用uglifyjs-webpack-plugiin将js压缩，减少打包js的文件大小
压缩Html
使用html-webpack=plugin对html进行压缩
CDN加载
库文件进行CDN加速
