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解析