Webpack打包优化（1）

主要目的减小包文件的大小

使用工具webpack-bundle-analyzer

• 可以作为webpack plugins使用

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

借助这个plugin，webpack之后会自动生成report.html 文件

• 可以作为cli命令进行使用

优化目标：大的模块

dependencies 是否存在没有必要的模块

• 查看package.json 文件的dependencies 节点是否存在没有必有包
• 开发时要注意debDependencies和dependencies的合理使用

是否存在重复的包

• 功能相同包名不同比如：loadash 和loadash-es，使用**es可以享受tree-shaking的红利

是否存在其他没有必要的模块

• 比如使用ant.design前端框架控件的时候会引入moment.js
  解决办法,使用IgnorePlugin

new webpack.IgnorePlugin({
  resourceRegExp: /^\.\/locale$/,
  contextRegExp: /moment$/,
});

https://webpack.js.org/plugins/ignore-plugin/

第三方UI控件按需加载

• 例如我们在使用ant.design控件尽量不要将整个包引入
• 创建控件引入组件库文件，按需import