webpack中的各种性能优化

590 阅读1分钟

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解析 在这里插入图片描述