Webpack

·  阅读 566

本文内容来自三十分钟掌握Webpack性能优化

image.png

什么是webpack

它是一个模块打包器,它分析各个模块的依赖关系,最终打包成我们常见的静态文件,.js、.css、.jpg、.png等文件。

webpack相关知识点

  • HMR

  • resolve

  • optimization

  • dll

  • webpack5

  • production

  • development

  • eslint

  • babel

  • pwa

  • loader

  • plugin

  • devtool

  • 性能优化

  • tree shaking

  • code split

  • caching

  • lazy loading

  • library

  • shimming

webpack基本原理

第一步:

  • webpack分析依赖是从一个入口文件 entry 开始分析。

  • 从entry出发,webpack就会通过这个文件的路径读取entry文件的信息(读取到的本质其实是字符串),包含entry文件和它所依赖的所有依赖dependencies模块。

  • webpack会把读取到entry相关的信息转成AST(抽象语法树)。

第二步:

  • 通过广度优先遍历dependencies数组,全部转成AST,同时通过mapping对应依赖项和该项的id。

  • 最后生成一个依赖图谱,所有模块的依赖分别完成。

第三步:

  • 现在已经能拿到依赖图谱,我们再通过调用bundle函数,其实bundle函数就是返回我们构造的字符串,拿到字符串,我们把字符串导出成bundle.js。

webpack性能优化

1. 构建速度优化

  • resolve:可以加快文件读取速度,因为会影响tree-shaking,所有对整体性比较强的库设置resolve,如react.min.js。
resolve: {
    // 默认值为node_modules,直接到node_modules里找依赖包,避免层层查找。
    modules: [path.resolve(__dirname, 'node_modules')],
    // 设置尽量少的值可以减少入口文件的搜索步骤
    mainFields: ['main'],
    // 使webpack直接使用库的min文件,避免库内解析
    alias: {
        'react': path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
    }
}
复制代码
  • noParse:字段告诉Webpack不必解析哪些文件,可以用来排除对非模块化库文件的解析。
module: {
    noParse:[/jquery|chartjs/, /react\.min\.js$/],
}
复制代码
  • 配置loader时,通过test、exclude、include缩小搜索范围

    匹配.js文件的时候,需要加 babel-loader,用来转ES6的代码。exclude用来排除打包某些文件中的代码。

 module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        }
    ]
},
复制代码
  • 使用DllPlugin减少基础模块编译次数,原理是把依赖的基础模块抽离出来打包到dll文件中,如react、react-dom,只要这些模块版本不升级,就只需被编译一次。

    1. 使用DllPlugin配置一个webpack.dll.config.js来构建dll文件
    // webpack.dll.config.js
    const path = require('path');
    const DllPlugin = require('webpack/lib/DllPlugin');
    module.exports = {
       entry:{
           react:['react','react-dom'],
           polyfill:['core-js/fn/promise','whatwg-fetch']
       },
       output:{
           filename:'[name].dll.js',
           path:path.resolve(__dirname, 'dist'),
           library:'_dll_[name]',  //dll的全局变量名
       },
       plugins:[
           new DllPlugin({
               name:'_dll_[name]',  //dll的全局变量名
               path:path.join(__dirname,'dist','[name].manifest.json'), //描述生成的manifest文件
           })
       ]
    }
    复制代码

    需要注意DllPlugin的参数中name值必须和output.library值保持一致,并且生成的manifest文件中会引用output.library值。

    最终构建出的文件:

     |-- polyfill.dll.js
     |-- polyfill.manifest.json
     |-- react.dll.js
     └── react.manifest.json
    复制代码
    1. 在主config文件里使用DllReferencePlugin插件引入xx.manifest.json文件
    //webpack.config.json
    const path = require('path');
    const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
    module.exports = {
        entry:{ main:'./main.js' },
        //... 省略output、loader等的配置
        plugins:[
            new DllReferencePlugin({
                manifest:require('./dist/react.manifest.json')
            }),
            new DllReferenctPlugin({
                manifest:require('./dist/polyfill.manifest.json')
            })
        ]
    }
    复制代码

    最终构建生成main.js

  • 使用HappyPack开启多进程Loader转换

    在整个构建流程中,最耗时的就是Loader对文件的转换操作了,而运行在Node.js之上的Webpack是单线程模型 的,也就是只能一个一个文件进行处理,不能并行处理。HappyPack可以将任务分解给多个子进程,最后将结果发给主进程。JS是单线程模型,只能通过这种多进程的方式提高性能。

    npm i -D happypack
    
    // webpack.config.json
    const path = require('path');
    const HappyPack = require('happypack');
    
    module.exports = {
        //...
        module:{
            rules:[
                {
                    test:/\.js$/use:['happypack/loader?id=babel']
                    exclude:path.resolve(__dirname, 'node_modules')
                },
                {
                    test:/\.css/,
                    use:['happypack/loader?id=css']
                }
            ],
            plugins:[
                new HappyPack({
                    id:'babel',
                    loaders:['babel-loader?cacheDirectory']
                }),
                new HappyPack({
                    id:'css',
                    loaders:['css-loader']
                })
            ]
        }
    }
    复制代码
  • 使用ParallelUglifyPlugin开启多进程压缩JS文件

2. 优化开发体验

开发过程中修改源码后,需要自动构建和刷新浏览器,以查看效果。这个过程可以使用Webpack实现自动化,Webpack负责监听文件的变化,DevServer负责刷新浏览器。

  • DevServer使用自动刷新

  • 开启模块热替换HMR

3. 优化输出质量 - 压缩文件体积

  • UglifyJSPlugin:去掉JS中无效代码、去掉日志输入代码、缩短变量名等优化。

  • UglifyESPlugin:直接运行ES6代码时,对ES6代码进行压缩。

  • 压缩CSS:

    css-loader?minimize

    PurifyCSSPlugin

  • 启动Tree Shaking:剔除用不上的死代码,它正常工作的前提是代码必须采用ES6的模块化语法

4. 优化输出质量 - 加速网络请求

4.1 使用CDN加速静态资源加载
  1. CND加速的原理

    CDN通过将资源部署到世界各地,使得用户可以就近访问资源,加快访问速度。要接入CDN,需要把网页的静态资源上传到CDN服务上,在访问这些资源时,使用CDN服务提供的URL。

    由于CDN会为资源开启长时间的缓存,例如用户从CDN上获取了index.html,即使之后替换了CDN上的index.html,用户那边仍会在使用之前的版本直到缓存时间过期。业界做法:

    • HTML文件:放在自己的服务器上且关闭缓存,不接入CDN。

    • 静态的JS、CSS、图片等资源:开启CDN和缓存,同时文件名带上由内容计算出的Hash值,这样只要内容变化hash就会变化,文件名就会变化,就会被重新下载而不论缓存时间多长。

    另外,HTTP1.x版本的协议下,浏览器会对于向同一域名并行发起的请求数限制在4~8个。那么把所有静态资源放在同一域名下的CDN服务上就会遇到这种限制,所以可以把他们分散放在不同的CDN服务上,例如JS文件放在js.cdn.com下,将CSS文件放在css.cdn.com下等。这样又会带来一个新的问题:增加了域名解析时间,这个可以通过dns-prefetch来解决 来缩减域名解析的时间。形如 //xx.com 这样的URL省略了协议,这样做的好处是,浏览器在访问资源时会自动根据当前URL采用的模式来决定使用HTTP还是HTTPS协议。

  2. 总之,构建需要满足以下几点:

  • 静态资源导入的URL要变成指向CDN服务的绝对路径的URL

  • 静态资源的文件名需要带上根据内容计算出的Hash值

  • 不同类型资源放在不同域名的CDN上

4.2 多页面应用提取页面间公共代码,以利用缓存
  • webpack4之前利用 CommonsChunkPlugin 插件来进行公共模块提取

  • webpack4之后利用 SplitChunksPlugin 插件来进行公共模块提取

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: "vendor",
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 10 // 优先级
                },
                common: {
                    name: "common",
                    test: /[\\/]src[\\/]/,
                    minSize: 1024,
                    chunks: "all",
                    priority: 5
                }
            }
        }
    },
};
复制代码

5. 优化输出质量 - 提升代码运行时的效率

5.1 使用Prepack提前求值 (不太成熟)
5.2 使用Scope Hoisting

6. 使用输出分析工具webpack-bundle-analyzer

7、其他Tips

  • 配置babel-loader时,use: [‘babel-loader?cacheDirectory’] cacheDirectory用于缓存babel的编译结果,加快重新编译的速度。另外注意排除node_modules文件夹,因为文件都使用了ES5的语法,没必要再使用Babel转换。

  • 配置externals,排除因为已使用<script>标签引入而不用打包的代码,noParse是排除没使用模块化语句的代码。

    假设我们开发了一个自己的库,里面引用了lodash这个包,经过webpack打包的时候,发现如果把这个lodash包打入进去,打包文件就会非常大。那么我们就可以externals的方式引入。也就是说,自己的库本身不打包这个lodash,需要用户环境提供。

    externals: {
       "lodash": {
          commonjs: "lodash", //如果我们的库运行在Node.js环境中,import _ from 'lodash'等价于const _ = require('lodash')
          commonjs2: "lodash", //同上
          amd: "lodash", //如果我们的库使用require.js等加载,等价于 define(["lodash"], factory);
          root: "_" //如果我们的库在浏览器中使用,需要提供一个全局的变量‘_’,等价于 var _ =   (window._) or (_);
        }
    }
    复制代码

    总得来说,externals配置就是为了使import _ from 'lodash'这句代码,在本身不引入lodash的情况下,能够在各个环境都能解释执行。

  • 配置performance参数可以输出文件的性能检查配置。

  • 配置profile:true,是否捕捉Webpack构建的性能信息,用于分析是什么原因导致构建性能不佳。

  • 配置cache:true,是否启用缓存来提升构建速度。

  • 可以使用url-loader把小图片转换成base64嵌入到JS或CSS中,减少加载次数。

  • 通过imagemin-webpack-plugin压缩图片,通过webpack-spritesmith制作雪碧图。

  • 开发环境下将devtool设置为cheap-module-eval-source-map,因为生成这种source map的速度最快,能加速构建。在生产环境下将devtool设置为cheap-module-source-map。

webpack性能优化实践

加快打包速度

1> loader中exclude与include是用来排除或包含指定目录下的模块。 例如,babel-loader设置exclude node_modules,node_modules中的JS文件已经编译为ES5,没必要再进行转换。exclude和include同时存在,exclude优先级更高。

2> babel-loader中设置cacheDirectory,用于缓存babel的编译结果,加快重新编译的速度。

3> @babel/preset-env的modules配置项设置为false会禁用模块语句的转化,否则将导致tree-shaking失效。

4> commonsChunksPlugin 和 splitChunks 可以减少重模块打包,提升打包速度,减小资源体积。

提升请求效率

1> output中publicPath,可以使用CDN链接,用户可以更快地请求到资源

减小资源文件体积

1> uglify.js 和 terser.js

参考文章

理解webpack原理,手写一个100行的webpack

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改