webpack常用配置优化

说到优化，首先肯定要通过一些分析工具找出项目存在的问题，然后针对问题来做对应的优化。 webpack优化分为两个方向： 1.构建速度层面优化 安装打包耗时分析插件： npm install --save-dev speed-measure-webpack-plugin 使用方法： // 导入速度分析插件 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); // 实例化插件 const smp = new SpeedMeasurePlugin(); //调用wrap方法，传入webpack配置对象 smp.wrap({ plugins: [] }) 2.代码输出质量优化 安装打包体积分析插件： npm install --save-dev webpack-bundle-analyzer // 导入体积分析插件 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; plugins: [ // 实例化体积分析插件 new BundleAnalyzerPlugin() ] //执行打包命令之后，本地http://127.0.0.1:8888/页面可查看打包后体积分布 构建速度层面优化： 1.缩小打包作用域 1.1 test/exclude/include 确定loader规则范围 1.2 resolve.modules 默认值为['node_modules'],含义是先去当前目录的node_modules下去找模块，没有找到就去上一级../node_modules中找，当第三方模块的路径确定时，可以指定其绝对路径，以减少寻找。 module.exports={ resolve:{ modules:[path.resolve(__dirname,'node_modules')] } } 1.3 resolve.mainFields 当webpack的target属性设置为 webworker, web 或者没有指定，默认值为： mainFields: ["browser", "module", "main"] 对于其他任意的 target（包括 node），默认值为： mainFields: ["module", "main"] 为了减少搜索步骤，如果你使用到的第三方模块的入口文件描述字段都是main时，可以把mainFields设为['main'] 1.4 alias 配置别名 通过配置别名来将原导入路径映射成一个新的导入路径,例如一些庞大的第三方模块，可以用别名指定其公共文件，从而跳过耗时的递归解析操作。 1.5 resolve.extensions 尽可能减少后缀尝试的可能性 在源码的导入时，也尽可能带上后缀，避免寻找过程 1.6 noParse 对完全不需要解析的库进行忽略 防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制。忽略大型的 library 可以提高构建性能 1.7 预编译资源模块 DllPlugin结合DllReferencePlugin 或者： hard-source-webpack-plugin ,配置简单，推荐使用 把复用性较高的第三方模块打包到动态链接库中，在不升级这些库的情况下，动态库不需要重新打包，每次构建只重新打包业务代码 2.多进程构建 2.1 thread-loader插件 webpack 是单线程模型的，所以webpack 需要一个一个地处理任务，不能同时处理多个任务。 thread-loader会将你的 loader 放置在一个 worker 池里面运行，以达到多线程构建。 2.2 多进程并行压缩代码 webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩 目前有三种主流的多进程压缩方案： parallel-uglify-plugin uglifyjs-webpack-plugin terser-webpack-plugin 这些插件能开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高 3.充分利用缓存 3.1 cache-loader 代码输出质量优化 1. 用 webpack 实现 CDN 的接入 静态资源的导入 URL 需要变成指向 CDN 服务的绝对路径的 URL 而不是相对于 HTML 文件的 URL。 静态资源的文件名称需要带上有文件内容算出来的 Hash 值，以防止被缓存。 不同类型的资源放到不同域名的 CDN 服务上去，以防止资源的并行加载被阻塞。 web-webpack-plugin 单页面应用生成 HTML 文件 extract-text-webpack-plugin 2. 多入口项目提取公共代码 SplitChunksPlugin 进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置) 3. 按需加载 webpack支持两种动态代码拆分技术： import()语法,用import引入的模块以及其子模块会被分割打包成一个独立的chunk 传统的require.ensure 4. 使用tree shaking tree shaking是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import和 export 使用： 使用 ES2015 模块语法（即 import 和 export）。 导入模块副作用的设置，在项目 package.json 文件中，添加一个 sideEffects入口，或者在module.rules配置选项中设置 sideEffects。 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin）。 5. 动态 Polyfill 服务 babel-polyfill由于是一次性全部导入整个polyfill，所以用起来很方便，但与此同时也带来了一个大问题：文件很大 动态 polyfill 指的是根据不同的浏览器，动态载入需要的 polyfill。 Polyfill.io 通过尝试使用 polyfill 重新创建缺少的功能，可以更轻松地支持不同的浏览器，并且可以大幅度的减少构建体积。 使用方法：在 index.html 中引入如下 script 标签 6. 启用Scope Hoisting Scope hoisting（作用域提升）,即让webpack 会把引入的 js 文件“提升到”它的引入者顶部。 Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快。 Webpack 内置的功能，只需要配置一个插件 plugins: [new webpack.optimize.ModuleConcatenationPlugin()]

本文章由javascript技术分享原创和收集