webpack 优化

代码配置优化 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加速