0
0

webpack之常见性能优化

webpack之常见性能优化

关于webpack常见的性能优化，可从以下三方面做处理。

  1. 构建性能，当构建性能越高，开发效率越高。
  2. 传输性能，在这方面重点考虑网络中总的传输量，以及文件数量等。
  3. 运行性能，主要是指js在客户端的运行效率。

构建性能

减少模块解析

如果某个模块不做解析，该模块经过loader处理后的代码就是最终代码。

对于单独的模块不需要解析（不进行AST、不记录依赖、不进行依赖替换等操作，直接生成最终代码），可以做一下处理：

module.exports ={
    mode:'development',
    mdule:{
        noParse:/ElementUI/,}}

对于存在依赖的模块，如果使用了noParse，存在的依赖并不会被记录和替换。

优化loader性能

限制loader的应用

针对某些第三方库，不必要使用某些loader处理。例如babel-loader，处理一些已经打包好的第三方库，反而增加了项目构建时间。

module.exports ={
    mode:'development',
    mdule:{
        rules:[{
                test:/\.js$/,
                include:/\.\src/,//应用于src目录下
                exclude:/node_modules/,//排除某些文件或目录
                use:["xx-loader"]}],}}

缓存loader的结果

当文件内容不变时，经过相同的loader解析后，解析结果并没有改变，所以这个时候将loader的解析结果保存下来，让后续的解析直接使用保存的结果，具体如下：

module.exports ={
    module:{
        rules:[{
                test:/\.js$/,
                use:[{
                    loader:'cache-loader'.
                    cacheDirectory:'./cache'},...loaders]}]}}

cache-loader的原理是，在执行loader之前，如果发现已缓存文件，直接在loader.pitch函数里return源代码。

多线程打包

通过thread-loader开启一个线程池，后续会把loader放进线程池的线程中运行以提高运行效率。

module.exports ={
    module:{
        rules:[{
                test:/\.js$/,
                use:[{
                    loader:'cache-loader'.
                    cacheDirectory:'./cache'},'thread-loader']}]}}

thread-loader可以通过测试决定放置的位置。

开启热替换

热替换（Hot Module Replacement）可以降低代码改动到效果呈现的时间,最新webpack默认开启热替换。

module.exports ={
    mode:'development',
    devServer:{
        open:true,
        hot：true},
    plugins:[newHtmlWebpackPlugin({
            template:'./public/index.html'})]}

默认情况下，webpack-dev-server不管是否开启热更新，当重新打包后，都会调用location.reload刷新页面，但如果运行module.hot.accept()，将改变这一行为。module.hot.accept的作用就是让webpack-dev-server通过socket管道，把服务器更新的内容发送到浏览器。

对于样式的热替换，可以添加style-loader

module.exports ={
    mode:'development',
    devServer:{
        open:true,
        hot：true},
    module:{
        rules:[{
            test:/\.css$/,
            use:['style-loader','css-loader']}]},
    plugins:[newHtmlWebpackPlugin({
            template:'./public/index.html'})]}

常见loader和plugin

loader名称loader描述babel-loader转换ES6+新特性语法style-loader将css文件引用并插到htmlcss-loader支持.css文件的加载和解析less-loader支持less文件转换sass-loader支持sass文件转换ts-loader将ts转换成jsfile-loader进行图片、字体等文件的打包raw-loader将文件以字符串形式导入thread-loader多进程打包plugin名称plugin描述CommonsChunkPlugin将chunks相同的模块代码提取成公共jsCleanWebpackPlugin清理构建目录ExtractTextWebpackPlugin从捆绑包或捆绑包中提取文本到单独的文件中CopyWebpackPlugin将文件或者文件夹拷贝到构建的输出目录HtmlWebpackPlugin创建html文件去承载输出的bundleUglifyjsWebpackPlugin压缩代码TerserPlugin压缩代码ZipWebpackPlugin将打包的资源生产zip包OptimizeCSSAssetsPlugincss压缩插件WebpackBundleAnalyzer模块依赖的可视化

传输性能

分包

webpack默认不进行分包，会把所有依赖添加到同一个bundle，特别是在多页面打包的情况下，会存在多个chunk引入公共模块导致冗余代码的情况，占用打包体积。

分包的目的是在不影响源代码的情况下降低代码体积，并非所有的情况都适合分包，需要视具体情况而定。

手动分包

思路：

  1. 打包公共模块。例如常见第三方库。
  2. 手动引入公共js

注意事项：

  1. 不要对小型库进行单独打包。
  2. 不要对依赖多的库进行单独打包

公共模块打包过程如下：

//webpack.dll.config.jsconst webpack =require('webpack')
module.exports ={
    mode:"production",
    entry:{
        element:['element'],
        jquery:['jquert']},
    output:{
        filename:'dll/[name].js',
        library:'[name]'//暴露全局变量名}，
    plugin:[newwebpack.DllPlugin({
            path:path.resolve(__dirname,'dll','[name].manifest.json'),//资源清单保存位置
            name:'[name]'//资源清单中保存的变量名}),]}//webpack.config.jsconst webpack =require('webpack')
module.exports ={
    plugin:[newwebpack.DllReferencePlugin({
            manifest:require('./dll/element.manifest.json')})//指定资源清单，在打包时对照资源清单，当发现该模块是资源清单里的资源时不进行打包处理。]}

引用： https://webpack.docschina.org/plugins/dll-plugin#dllplugin

自动分包

webpack提供了optimization配置项，其中splitChunks是分包策略的配置，通过splitChunksPlugin配置分包策略进行分包，分包时，webpack开启了一个新的chunk，对分离的模块进行打包。

一般开发阶段没必要分包，因为有热替换，并且开发一般是在本机，大文件对开发阶段影响不大。

分包的基础单位是模块。所以在设置minSize时有时会出现打包的文件超过该值。

全局策略：

module.exports ={
    entry:{},
    output:{},
    optimization:{
        splitChunks:{
            chunks:'all',//默认为async，可选all或者initial
            maxSize:30*1024,//控制包的最大字节数
            automaticNameDelimiter:'.',//新chunk名称的分隔符，默认为～
            minChunks:1,//一个模块被多少个chunk使用时才会进行分包，默认为1
            minSize:30*1024,//单位为字节，当分包达到多少字节后才允许被真正地拆包，默认为30000},},
    plugin:[]}

缓存组策略：
当不配置cacheGroups时，内部会存在vendors和default默认配置，我们也可以通过手动更改默认值。

module.exports ={
    entry:{},
    output:{},
    optimization:{
        splitChunks:{
            cacheGroups:{//默认存在以下配置，可继承全局配置
                vendors:{
                    test:/[\\/]node_modules[\\/]/,//当匹配到相应模块时，将这些模块进行单独打包
                    priority:-10//缓存组优先级，优先级越高，该策略越先进行处理，默认值为0},default:{
                    minChunks：2,//最小chunk引用数为2
                    priority：-20,//优先级
                    reuseExistingChunk:true,//重用已经分离的chunk},
                elementUI:{
                    minSize:0,
                    test:/[\\/]node_modules[\\/]_?element-ui(.*)/,
                    minChunks:2}}},}}

模块体积优化

代码压缩

webpack内置terser，terser是一个代码压缩工具，压缩代码除了压缩代码体积，还可以提升破解成本。

Terser官网：https://terser.org/

默认情况下webpack的production模式是开启代码压缩，当我们要更改压缩配置时，可做以下处理：

module.exports ={
    optimization:{
        minimize:true,//是否启动压缩，默认是只在生产环境自动开启。
        minimizer:[//压缩时使用的插件，当你自动改压缩配置时必须配置相关压缩插件newTerserPlugin(),//js压缩插件newOptimizeCSSAssetsPlugin()//css压缩插件]}}

terser、webpack、rollup.js都能够识别/#PURE/注释标记，/#PURE/的作用就是告诉打包工具该函数的调用不会产生副作用。

tree shaking

tree shaking，树摇，可以理解为摇动一棵树，即将腐烂的果实也随之摇动而掉落。

能够tree shaking的代码需要满足一定的代码规范，例如以下情况：

//有利于tree shakingexport xxx 导出，
import{xxx}from'xxx'导入

//不利于tree shakingexportdefault{xxx}导出，
import xxx from ‘xxx'导入

上面的情况当webpack依赖分析完毕后，webpack会根据每个模块每个导出是否被使用，标记其为dead code，然后交给代码压缩工具处理。

commonjs很难做到tree shaking，所以主流的库为了做tree shaking，都会发布其es6版本。

以vue为例，vue的代码中大量使用/#PURE/注释，通常产生副作用的代码都是模块内函数的顶级调用。该注释可以作用于任何语句上，让打包工具识别。

tree shaking对于无法识别副作用的函数会认为是副作用函数，不会产生副作用的代码标记/#PURE/注释。

相比于js，css并无法做到tree shaking，不过可以通过正则匹配页面样式有没有引用进行移除样式代码。

可以通过purgecss-webpack-plugin进行处理，css module无法处理。

https://www.npmjs.com/package/purgecss-webpack-plugin

懒加载

通过动态导入模块，例如在判断里使用导入语句。
导入语句不能使用commonjs，虽然require支持动态导入，但是它在打包环节也会进入依赖分析。
动态加载可以使用import()，import作为es6的草案，webpack打包发现使用import()的调用，会对其单独打包，打包结果该代码时，浏览器会使用jsonp远程请求该模块，import()返回的是一个promise。

asyncfunctionrun(){if(判断条件){const{ chunk }=awaitimport(/* webpackChunkName:'自定义chunkName' */'xxx.js')}}run()

请求的异步的模块会加入webpackJsonp数组里。

值得注意的是，这样的异步导入是不可以做到tree shaking的，不过可以使用取巧的方法，通过一个媒介引入，打包分析过程既能tree shaking又能异步加载。

//媒介文件export{ xxx }from'目标文件'//主文件asyncfunctionrun(){if(判断条件){const{ chunk }=awaitimport('媒介文件')}}run()

gzip

http传输中，开启gzip需要进行如下配置：

  1. request header：Accept-Encoding:gzip,deflate,br
  2. response header:Content-Encoding:gzip

对哪些文件压缩，采用哪种压缩算法，这个需要测试权衡，毕竟压缩文件和解压文件都是需要时间的，对于相对大点的文件一般会有收益。

webpack压缩参与的步骤在于将文件预压缩，当请求到来时直接响应已经压缩的文件，而不需要先压缩再响应。

gzip预压缩可以通过compression-webpack-plugin插件进行。

const CompressionWebpackPlugin =require('compression-webpack-plugin')

module.export={
    plugin:[newCompressionWebpackPlugin({
            test:/\.js$///针对需要预压缩的文件
            minRatio:0.5//压缩比率})]}

以gzip为例，打包之后的文件包含了.js和.js.gz文件

辅助工具

  1. ESLint：通过ESLint规范代码。
  2. webpack-bundle-analyzer：通过该插件可以生成可视化打包结果的页面，有助于我们分析模块依赖。

运行性能

运行性能这方面，主要指js在浏览器端运行速度，取决于我们如何书写高性能的代码。

关于高性能的代码，可以参考常见的设计模式、代码规范、最佳实践等。

标签： webpack 前端
本文转载自: https://blog.csdn.net/Mr_RedStar/article/details/123462435
版权归原作者 Mr_RedStar 所有， 如有侵权，请联系我们删除。
登录后发布评论

“webpack之常见性能优化”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

AIGC实战——多模态模型Flamingo

20240914 每日AI必读资讯

盘点10款顶级加密软件，让你的数据更安全

2024ICPC网络赛第一场

cmake应用：集成gtest进行单元测试_cmake 使用 gtest

ubuntu20.04 安装vscode 并且配置环境

Windows下如何查看一个dll依赖的其他dll库

文章导航