webpack 优化

心已赠人 2022-09-12 10:56 171阅读 0赞

# 1.热模块更新 #

webpack.config.js设置:

entry : ['./src/js/index.js','./src/index.html'],

入口文件inde:x.js监听非入口js文件:

if(module.hot){
        module.hot.accept("./print.js",function(){
            echo()
        })
    }
    
    if(module.hot){
        module.hot.accept("./test.js",function(){
            test1
        })
    }

# 2.开发环境代码映射source-map #

devtool : 'source-map'
    //外部映射:生成额外map文件，内部映射:映射代码写在built.js文件内
    //source-map 外部映射,显示错误代码准确信息和详细位置
    //inline-source-map 内联映射，显示错误代码准确信息和详细位置
    //hidden-source-map 外部映射, 显示错误代码准确信息，显示构建后错误代码位置，不显示源代码错误位置
    //eval-source-map 内联映射, 显示错误代码准确信息，显示构建后错误代码位置，显示源代码错误位置(在文件hash值冒号后面),源代码文件会加hash值
    //nosources-source-map 外部映射,显示错误代码准确信息和详细位置,不显示任何源代码
    //cheap-source-map 外部映射,显示错误代码准确信息和详细位置,只精确到一整行
    //cheap-module-source-map 与cheap-source-map类似，会将loader的source-map加入
    //速度 eval>inline>cheap...    eval-cheap-source-map最快，适合开发环境
    //调试友好 source-map 
    //开发环境最终选择 eval-source-map 或者 eval-cheap-module-source-map
    //生产环境下，内联会让代码体积庞大，所以只选外部映射，可选source-map,考虑隐藏源代码可加hidden或者nosources

# 3.oneOf  #

优化点: 每个不同类型的文件在loader转换时，遍历时会被module中rules中所有loader命中，设置oneOf后遍历时被一个loader命中的文件不会继续被其他loader命中,相当于break;利用了每个文件只能被一个loader转换;

当需要一个文件被多个loader转换时，在oneOf中保留一个loader配置，其他的放在oneOf外面即可，例如:

rules : [
                /*
                        *   正常情况一个文件只能被一个loader处理；
                        *   当一个文件被多个loader处理，一定要指定loader执行的先后顺序
                        *   先执行eslint，再执行babel    
                        */
                {
                    //js语法规范检查,还需要在packge.json中配置eslintConfig,选择airbnb语法规范
                    test : /\.js$/,
                    exclude : /node_modules/,
                    loader :"eslint-loader",     
                    enforce : "pre",    //优先执行
                    options : {
                        //自动修复语法不规范
                        fix : true
                    }
                },
                {
                    oneOf : [
                        {
                            test : /\.css$/,
                            use : [...commonCssLoader]
                        },
                        {
                            test : /\.less$/,
                            use : [ ...commonCssLoader,"less-loader" ]
                        },
                        
                        {
                            //es6新语法兼容性处理
                            test : /\.js$/,
                            exclude : /node_modules/,
                            loader : 'babel-loader',
                            options : {
                                presets : [
                                    [
                                        //兼容简单的es6改进语法
                                        "@babel/preset-env",
                                        {
                                            //按需加载promise,await等新语法
                                            useBuiltIns : 'usage',
                                            corejs : { version : 3 },
                                            targets : {
                                                chrome : "60",
                                                firefox : "50",
                                                ie : "9",
                                                safari : "10",
                                                edge : "17"
                                            }
                                        }
                                    ]
                                ]
                            }
                        },
                        {
                            //解析css内的图片
                            test : /\.(jpg|png|gif)$/,
                            generator : {
                                filename : 'imgs/[hash][ext]'
                            }
                        },
                        {
                            //解析html内的图片
                            test : /\.html$/,
                            use : ["html-loader"]
                        },
                        {
                            //解析其他文件
                            exclude : /\.(js|css|less|sass|html|jpg|png|gif)$/,
                            generator : {
                                filename : "media/[hash][ext]"
                            }
                        }
                    ]  
                },
                
            ]

# 4.生产环境缓存配置 #

1.babel缓存，只更新改变的浏览器兼容代码，第二次打包的速度更快。

{
                            //es6新语法兼容性处理
                            test : /\.js$/,
                            exclude : /node_modules/,
                            loader : 'babel-loader',
                            options : {
                                presets : [
                                    [
                                        //兼容简单的es6改进语法
                                        "@babel/preset-env",
                                        {
                                            //按需加载promise,await等新语法
                                            useBuiltIns : 'usage',
                                            corejs : { version : 3 },
                                            targets : {
                                                chrome : "60",
                                                firefox : "50",
                                                ie : "9",
                                                safari : "10",
                                                edge : "17"
                                            }
                                        }
                                    ]
                                ],
                                cacheDirectory : true
                            }
                        },

2.文件资源缓存，给每个编译文件加个hash值，文件内容变更的时候生成新的编译文件；

存在一个问题，所以文件共用一个hash值，当一个文件更新，其他文件全都会生产新的编译文件

output : {
            filename : "js/built[hash:10].js",
            path : resolve(__dirname,"build")
        },
    
    plugins : [
            //以src/index.html文件为html模板文件
            new HttpWebpackPlugin({
                template : "./src/index.html",
                minify : {
                    collapseWhitespace : true,  //压缩html内空格,
                    removeComments : true   //去除html注释
                }
            }),
            new MiniCssExtractPlugin({
                filename : "css/built[hash:10].css"
            }),
        ],

chunkhash,如果编译文件来源于同一个chunk，那么他们的hash值是一样的，

chunk定义: 由于上面的例子中，index.css,print.css,test.css都在index.js中被引用，那么他们一个chunk;

所以上面的编译文件用chunkhash的话，当一个文件改变了,其他文件也会生成新的编译文件，因为他们是同一个chunk;

contenthash:根据文件内容生成hash值，不同文件的hash值不一样，当改变一个文件的内容，编译时其他文件不会产生影响；

output : {
            filename : "js/built[contenthash:10].js",
            path : resolve(__dirname,"build")
        },
    
    plugins : [
            //以src/index.html文件为html模板文件
            new HttpWebpackPlugin({
                template : "./src/index.html",
                minify : {
                    collapseWhitespace : true,  //压缩html内空格,
                    removeComments : true   //去除html注释
                }
            }),
            new MiniCssExtractPlugin({
                filename : "css/built[contenthash:10].css"
            }),
        ],

让代码上线运行更快

# 5.tree shaking #

去除无用代码

前提:1.必须使用es6模块化；2.必须是production环境

optimization: {
            //CSS压缩
            minimizer: [
                new CssMinimizerPlugin(),
            ],
            minimize: true,
        },
    
    设置此选项貌似会默认设置开发环境,导致js代码不会压缩，tree-shaking无法执行

默认css文件会被当作无用文件尔不被执行，修改方法:packge.json配置:

"sideEffects" : ["*.css","*.less"]

# 6.code\_split文件分割 #

拆分文件

1.拆分入口，单入口改多入口:

//多入口,有一个入口就生成一个bundle
        entry : {
            main : './src/js/index.js',
            test2 : './src/js/test2.js'
        },
        output : {
            //[name]根据入口文件名，生成bundle文件名
            filename : "js/[name][contenthash:10].js",
            path : resolve(__dirname,"build")
        },

单页面应用使用单入口，多页面应用使用多入口;

2.设置optimization：

将node\_modules中的代码单独打包成一个chunk,如果是多入口共用同一个node\_modules也只生成一个node\_modules

optimization : {
            splitChunks : {
                chunks : "all"
            }
        },

3.在单入口应用下，分割文件

使用import方法引入文件:

import(/* webpackChunkName: 'test2' */"./test2.js").then(res=>{
      console.log(res.minus(8,1));
    }).catch(err=>{
      console.log(err);
    })

# 7.JS文件懒加载 #

懒加载：当文件需要时加载

预加载：会在js使用之前提前加载文件

document.getElementById("d1").onclick=function(){
      import(/* webpackChunkName:'test2', webpackPrefetch:true*/"./test2.js").then(res=>{
        console.log(res.minus(101,1)); 
      })
    }

正常加载与预加载的区别:

正常加载可以认为是并行加载（同一时间加载多个文件）,懒加载是等其他资源加载完毕，浏览器空闲后再加载其他资源

# 8.PWA-渐进式网络应用开发程序（离线可访问） #

npm i workbox-webpack-plugin -D

webpack.config.js配置

const WorkboxWebpackPlugin=require("workbox-webpack-plugin")
    
    
    plugins : [
            //以src/index.html文件为html模板文件
            new HttpWebpackPlugin({
                template : "./src/index.html",
            }),
            new WorkboxWebpackPlugin.GenerateSW({
                //帮助serviceworker快速启动
                clientsClaim : true,
                //删除旧的serviceworker,生成一个servicewoker配置文件
                skipWaiting : true
            })
        ],

入口文件index.js引入:

注意:需要在服务器环境运行

//注册serviceworker
    //处理兼容性问题
    
    if("serviceWorker" in navigator){
      window.addEventListener('load',()=>{
        //service-worker.js由webpack的workbox-webpack-plugin插件生成
        navigator.serviceWorker.register('./service-worker.js').then(()=>{
          console.log("sw registed success");
        }).catch(error=>{
          console.log("sw registed error",error);
        })
      })
    }else{
      console.log("no support");
    }

# 9.多进程打包 #

npm i thread-loader -D

在babel之后引入

有利有弊:进程启动需要600ms，进程通信也有开销;只有工作消耗时间比较长才需要多进程打包

module : {
            rules : [
                {
                    //es6新语法兼容性处理
                    test : /\.js$/,
                    exclude : /node_modules/,
                    use : [
                        //多进程打包
                        "thread-loader",
                        {
                            loader : 'babel-loader',
      
                        }
                    ],
                }
            ]
        },

详细配置

rules : [
                {
                    //es6新语法兼容性处理
                    test : /\.js$/,
                    exclude : /node_modules/,
                    use : [
                        //多进程打包
                        {
                            loader : "thread-loader",
                            options : {
                                workers : 2     //2个进程
                            }
                        },
                        {
                            loader : 'babel-loader',
                        }
                    ],
                }
            ]

# 10.externals #

忽略打包项,不生成bundle,一般不将cdn(引用)文件打包成bundle,优化打包速度

//与entry同级
        externals : {
            //忽略库名--npm包名
            jQuery : 'jQuery'
        }

# 11.dll单入口库文件单独打包 #

webpack.dll.js文件(与webpack.config.js同级):

/*
    使用dll技术，对某些库(jquery,react,vue)进行单独打包，
    当运行webpack时，默认查找webpack.config.js
    需求:需要运行webpack.dll.js文件
    webpack --config webpack.dll.js
    */
    
    let {resolve}= require("path")
    let Webpack=require("webpack")
    
    module.exports={
        entry : {
            //最终打包生成的[name]--要打包的库名称
            jquery : ['jquery']
        },
        output : {
            filename : '[name].js',
            path : resolve(__dirname,"dll"),
            library:'[name]_[hash]',
        },
        plugins : [
            //打包生成mainfest.json,提供jquery映射
            new Webpack.DllPlugin({
                name : '[name]_[hash]',      //映射库的暴露内容的名称
                path : resolve(__dirname,"dll/mainfest.json")
            })
        ],
        mode : "production"
    }

webpack.config.js:

npm i add-asset-html-webpack-plugin -D

const { resolve }=require("path")
    
    const HttpWebpackPlugin=require("html-webpack-plugin")
    
    let Webpack=require("webpack")
    let AddAssetHtmlWebpackPlugin=require("add-asset-html-webpack-plugin")
    
    module.exports={
        entry :  './src/js/index.js',
        output : {
            //[name]根据入口文件名，生成bundle文件名
            filename : "js/[name].js",
            path : resolve(__dirname,"build")
        },
        module : {
        
        },
    
        plugins : [
            //以src/index.html文件为html模板文件
            new HttpWebpackPlugin({
                template : "./src/index.html",
            }),
            //告诉webpack哪些库不参与打包，同时修改使用名称
            new Webpack.DllReferencePlugin({
                manifest : resolve(__dirname,'dll/mainfast.json')
            }),
            //将dll文件夹中某个文件打包输出出去，并在html中自动引入该资源
            new AddAssetHtmlWebpackPlugin({
                filepath : resolve(__dirname,'dll/jquery.js'),
                outputPath : "auto"
            })
        ],
        mode : 'production',     //生产环境js自动压缩
        devServer : {
            hot : true
        },
    }