谈谈通过webpack配置优化实现页面性能提升

[su37josephxia]

⽤webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。

压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件， 利⽤ cssnano （css-loader?minimize）来压缩css 利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径 Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现 Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存 提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

[674252256]

压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack 的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件， 利⽤ cssnano （css-loader?minimize）来压缩css 利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对 于 output 参数和各loader的 publicPath 参数来修改资源路径 Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来 实现Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存 提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的 公共代码

[zcma11]

压缩代码，分 chunk，tree shaking，提取 css，压缩css，将比较小的资源转base64。optimization.concatenateModules 减少多余模块。开启 production，使用 webpack 默认的优化。

[QbjGKNick]

webpack 配置优化

• 控制压缩代码：抽离压缩 CSS、HTML
• 利用 tree shaking：删除不会使用的代码；
• 代码分割：将代码按模块或组件分割开来；
• 抽离公共模块；
• 开启静态资源 CDN 加速。

[jiafei-cat]

如何通过webpack配置优化页面性能(注意是页面性能而不是webpack打包性能) 首先webpack打包的时候要选定production模式，开启该模式会启用tree-sharking 代码压缩 chunk优化等，但是想进一步chunk优化需要使用optimization 的配置项，例如抽取支持模块化的公共代码需要开启runtimeChunk配置项，自定义抽取chunk规则，需要配置splitChunks的cacheGroups。打包出来的文件写插件上传到OSS，并将publicPath指定为CDN地址。CSS方面的话使用mini-css-extract-plugin(webpackV5)抽取单独的css文件并且也放OSS。第三方的组件库，象antd类的使用babel-plugin-import支持动态引入。项目整体而言象SPA页面可以做SSG, 利用prerender插件生成非用户相关页面加快第一次访问速度。当然最主要是通过webpack-bundle-analyzer和lighthouse的报告分析是什么影响的页面性能。

[superjunjin]

• 提取公共代码

  Webpack4中可以将多个公共模块打包一份，减少代码冗余，Webpack4之前的版本是使用webpack内置的CommonsChunkPlugin实现的，Webpack4直接配置optimization即可。

• 按需加载

  在开发中，我们一般会将业务代码打包为app.js，其他第三方依赖打包为vendor.js。这样会有一个比较大的问题，如果依赖的第三方模块过多，vendor.js会越来越大，而在浏览器加载时需要完全加载完vendor.js才可以，这样就会造成无谓的等待，因为我们当前页面可能只使用了一部分代码。此时可以使用Webpack来实现按需加载，只有在真正用到这个模块时才会加载相应的js。

• Tree-Shaking

  Tree-Shaking原始的本意是”摇动树“，这样就会将一些分支”摇掉“，从而减少主干大小。而Webpack中的Tree-Shaking是类似的，在Webpack项目中，有一个入口文件，相当于树的主干，入口文件又依赖了许多模块。实际开发中，虽然依赖了某个模块，但其实只使用了其中的部分代码，通过Tree-Shaking，可以将模块中未使用的代码剔除掉，从而减少构建结果的大小。

• HappyPack

  Webpack默认情况下是单进程执行的，因此无法利用多核优势，通过HappyPack可以变成多进程构建，从而提升构建速度。下面我们一起来看看如何使用happypack来加速构建。

• IgnorePlugin

  在导入模块时，IgnorePlugin可以忽略指定模块的生成。比如moment.js在导入时会自动导入本地化文件，一般情况下几乎不使用而且又比较大，此时可以通过IgnorePlugin忽略对本地化文件的生成，减小文件大小。

• module.noParse配置

  module.noParse可以告诉Webpack忽略未采用模块系统文件的处理，可以有效地提高性能。比如常见的jQuery非常大，又没有采用模块系统，让Webpack解析这类型文件完全是浪费性能。

• resolve.extensions配置

  导入未添加扩展名的模块时，Webpack会通过resolve.extensions后缀去检查文件是否存在。由于resolve.extensions是一个数组，如果数组项比较多，正确的后缀放置得越靠后，Webpack尝试次数就会越多，影响到性能。

  因此配置resolve.extensions时需要遵守以下规则：

  • 尽量减少后缀列表，不要将不可能存在的文件后缀配置进来
  • 出现频率越高的后缀尽量写到前面，比如可以将.js写在第一个
  • 业务代码中导入模块时，可以手动加上后缀导入，省去Webpack查找过程

• loader配置

  减少Webpack搜索文件的范围，减少不必要的处理。推荐给每个loader定义test之后还定义include或exclude。来减少搜索文件范围。

[crazyyoung1020]

利用webpack提升页面性能，我们从以下几个维度考虑

1. 压缩文件，减小文件体积
   • 压缩js，官方推荐terser-webpack-plugin
   • 压缩css，通过css-minimizer-webpack-plugin配置
   • 压缩html，通过HtmlWebpackPlugin插件的minify来配置
   • 压缩图片，通过image-webpack-plugin配置
2. 提取公共代码, 减小服务器压力，通过commons-chunk-plugin配置
3. 分包,通过split-chunks-plugin，去控制包体积大小，超过一定体积则分包
4. treeshaking，通过配置usedExports为true来对未被引用的模块做标记，通过sideEffects告诉webpack哪些文件不用处理,或者都可以处理。然后再交给terser去做tree-shaking消除无效代码

[rachern]

webpack如何提升页面性能

• tree-sharking
• 代码压缩 以上优化可以直接开启 mode: production 模式完成
• 提取公共依赖模块：通过 optimize.CommonsChunkPlugin 将公共模块提取到一个 chunk 中
• 资源懒加载：通过 import() 方法在需要使用资源的地方才进行资源的加载
• 利用缓存：用 chunkhash 作为文件名，能够在 chunk 没有改变时利用浏览器缓存，在 chunk 改变时可以及时获取新的文件

[wzl624]

1.压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css 2.利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径 3.删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现 4.提取公共代码。