前端工程化学习之webpack的优化

webpack的各种优化

1.删除无用的css

purgecss-webpack-plugin：删除无用的css插件
glob：功能是查找匹配的文件
先下载这两个包，再去webpack.config.js文件中进行配置

2.图片压缩

image-webpack-loader
安装这个加载器的时候会遇到各种坑，如果丢包就用cnpm多下载几次
安装成功之后运行 npm run dev会报一个错Automatic publicPath is not supported in this browser
解决办法：
在webpack.config.js文件中的output中添加 publicPath: ‘./’

3.eslint：检验代码（不建议使用）

安装：eslint eslint-loader

4.Tree-shaking &scopeHosting(生产环境下)

将没用的内容过滤掉
在package.json中去配置sideEffects（唯一一个在package.json中配置的）
配置的时候要注意要把css文件排除在外，否则它会把没用到的css文件也过滤掉

5.懒加载（动态加载模块）

webpackPrefetch：利用浏览器空闲时间，把动态模块加载完成并引入进来
webpackPreload：跟主模块的代码同时进行加载
这两个属性都是用在 import() 中，例如 import(/* webpackPreload:true*/‘main’)

6.source（代码排查）

• cheap-module-eval-source-map（开发环境）
• cheap-module-source-map（生产坏境）
  就是在webpack.config.js文件的module.exports中添加属性 devtool，根据其值来判断是排查哪个环境中的代码
  

7.打包文件分析工具（生产环境下使用）

安装 webpack-bundle-analyzer
然后去配置文件 webpack.config.js 中进行配置

8.resolve解析（直接去webpack.config.js配置，不需要安装什么）

• extension 添加扩展名进行匹配
• alias 设置别名
  

9.include/exclude

指定哪些文件通过或不通过loader解析
例如：指定 node_modules文件下的js不需要loader解析