WebPack4.0拿去即用系列(三)--优化

客官°小女子只卖身不卖艺 2022-04-16 04:15 141阅读 0赞

## 优化 ##

前提：webpack4.0这个版本已经给我们做了大量优化，所以咱们不涉及4.0之前的版本

**一、开发时打包优化**  
1，根目录创建一个新的文件专门用于将所有第三方不需要打包的统一做一次路径映射  
如：`webpack.unpackage.js`

2,在`webpack.unpackage.js`中添加

let DllPlugin = require("webpack/lib/DllPlugin") 
    module.exports = {
    entry: {
        react: ["react", "react-dom"],       //写入你引入的第三方的库的名称
    },
    output: {
        filename: "dll.js",                  //最终生成的映射文件的名称
        path: path.resolve(__dirname, "./dist"),
        library: "[name]_dll"               //这个name即entry得key,名称会成为dll.js中暴露出的变量名，对应生成json文件的中的name
    },
    plugins: [
        new HttpWebpakePlugin({
            template: "./src/index.html"
        }),
        new DllPlugin({
          name:"[name]_dll" ,
          path:path.resolve(__dirname,"./dist","[name].manifest.json") //生成一个json,json中的id，就对应dll文件中真实引用路径，从而免去打包，直接应用路径中的资源
        })
      ],
    }

二、在真正的打包和运行中产生关联关系

引入： `let DllReferencePlugin = require("webpack/lib/DllReferencePlugin")`  
其实我们所作的就是将此处需要打包处理的js中所有引入使用，但是不用打包的资源

entry: {
            entry:  "./src/index.js" ,
      },

使用内置的关联插件

plugins: [
            new DllReferencePlugin({
                manifest: path.resolve(__dirname, "./dist", "react.manifest.json") //但是引入的资源都先去这里面查找，然后dll中获取真实路径
            })
        ],

将生成生成dll.js写死在html中，保证引用到，每次打包都避免臃肿

如果找不到路径

devServer: {
        contentBase: "./dist",    //如果找不到资源就指定server运行的静态资源是来自打包后的
        port: 8888,
    }

最后在package.json中添加一个script用来排除打包资源生成相应的映射文件，从而避免之后开发每次打包都非常的缓慢臃肿

"test":"webpack --config webpack.test.js"

**二、打包速度优化**  
1、适合大型项目，否则启动并行任务所耗资源比直接打包还大

cnpm install happypack -D      //核心原理就是启动了多个线程，进行并行任务

//引入打包插件

let happyPack=require("happypack")

2、改变`rules`中要打包的资源的use的使用对象为`happypack/loader？id=XX`

rules: [
                {
                    test: /\.js$/,
                    use:"happypack/loader?id=js",  //使用happypack打包的固定写法
                    include: path.join(__dirname, 'src'),
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: "happypack/loader?id=css",
                    include: path.join(__dirname, 'src'),
                    exclude: /node_modules/
                }
            ]

3,改变plugins中

plugins: [
            new happyPack({
              id:"js",                //happypack 根据id自动找到对应要启用的资源
              use:["babel-loader"]
            }),
            new happyPack({
                id:"css",             //happypack 根据id自动找到对应要启用多线程打包的资源
                use:["style-loader", "css-loader"]
              }),
            new DllReferencePlugin({
                manifest: path.resolve(__dirname, "./dist", "react.manifest.json")
            }),
            new HttpWebpakePlugin({
                template: "./src/index.html"
            })
        ]

**三、Tree Shaking**  
1，`webpack4.0 mode：production` 已经做了`Tree Shaking` 自动过滤没有关联，无用的代码，  
2、注意：这里`node.js`中的Common的语法规则`require`，不起作用，所以尽量避免在前端写require  
3, `package.json`中 `scripts{build:"webpack --display-used-exports"}` 也能实现`shaking`

**四、代码分割**

即，防止打包时将多个页面引用的同一个资源进行反复打包耗费性能  
在webpack.config.js中添加

optimization: {
            splitChunks: {  
                cacheGroups: {
                    common: {
                        chunks: "initial",
                        minChunks: 2,
                        minSize: 0
                    },
                    vendor: {                //处理第三方的公共引用资源
                        test: /node_modules/,//  限制只在此文件夹的第三方资源
                        chunks: "initial",
                        minChunks: 2,
                        minSize: 0,
                        name:"common",
                        priority: 10        //增加权重，优先common执行：这一步操作就是防止common将全局引用全部打包完成
                    }
                }
            }
        },

**五、ModuleConcatenationPlugin 提升作用域，优化代码文件**

1、引入自带插件

let moduleConcatenationPlugin=require("webpack/lib/optimize/ModuleConcatenationPlugin");

2、创建插件实体

plugins[
          new moduleConcatenationPlugin(),
        ]

**六、懒加载（这个需要时刻记住咯）**  
解决如首屏加载如首屏加载过慢的问题  
一、安装异步引入组件  
cnpm install @babel/plugin-syntax-dynamic-import -D  
二、判断组件的引用状态

class AsyncComponent extends React.Component \{  
constructor() \{  
super()  
this.state = \{ Comp: null \}  
\}  
componentWillMount() \{  
this.props.load().then(res => \{  
this.setState(\{ Comp: res.default \})  
\})  
\}  
render() \{  
let \{ Comp \} = this.state  
return Comp &&  
\}  
\}  
三、在.babelrc中引入组件

"plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]

四、动态引入组件  
//由静态引入转为动态引入

let Home = (props) => <AsyncComponent {...props} load={() => import("./Home")} />
    let About = (props) => <AsyncComponent {...props} load={() => import("./About")} />

五、配置路由

**待续…  
如有错误，敬请留言指点，我立马改正，以免误导他人~谢谢！**