webpack4脚手架搭建2——提取公共代码以及代码分割和懒加载

本文链接：https://blog.csdn.net/weixin_34294049/article/details/88665968

由于模块化开发中存在模块依赖问题，所以为了减少代码的冗余，提升用户加载速度，我们需要提取公共代码。
webpack 4 移除了 CommonsChunkPlugin，取而代之的是两个新的配置项（optimization.splitChunks 和 optimization.runtimeChunk）

准备工作

我们在src/文件夹下创建app.js，同时引用subPage.js和publicPage.js两个业务模块，而subPage.js和publicPage.js同时引用了lodash（第三方插件）。
在这里插入图片描述
app.js

import './assets/js/subPage'
import './assets/js/publicPage'

export default 'mainPage'

subPage.js

import _ from 'lodash'
import './publicPage'
console.log("我是子页面")

export default 'subPage'

publicPage.js

import _ from 'lodash'
console.log("我是公用模块")
export default 'publicPage'

配置webpack

安装lodash cnpm install lodash --save-dev

const path = require('path')
module.exports = { //module.exports为CommonJS规范
    entry: { 
        app: './src/app'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename:'[name].bundle.js', 
        chunkFilename:'[name].chunk.js'
    },
    mode:'development',
    module:{
        rules: [ 
            {
                test:/\.js$/,
                use:{         
                    loader:'babel-loader'
                },
                exclude:'/node_modules/' 
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
            // 注意: priority属性
            // 其次: 打包业务中公共代码
            common: {
                name: "common",
                chunks: "all",
                minSize: 1,
                priority: 0
            },
            // 首先: 打包node_modules中的文件
            vendor: {
                name: "vendor",
                test: /[\\/]node_modules[\\/]/,
                chunks: "all",
                priority: 10
            }
            }
        }
    }
}

缓存组（Cache Group）
这项优化可以用于将模块分配到对应的Cache group。
一个模块可以被分配到多个缓存组，优化策略会将模块分配至跟高优先级别（priority）的缓存组，或者会分配至可以形成更大体积代码块的组里。例如针对第三方库（lodash）通过设置priority来让其先被打包提取，最后再提取剩余代码。
关于optimization更多配置，可参考webpack官网配置说明

提取公共代码块

命令行中运行webpack即可打包。可以看到，我们成功提取了公共代码，如下图所示：
在这里插入图片描述

代码分割和懒加载

单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过webpack的写法和内置函数实现的。
webpack提供了两种函数：
1.import(): 引入并且自动执行相关 js 代码
2.require.ensure(): 引入但需要手动执行相关 js 代码
由于动态导入（）的方式不论在语意上还是语法使用上都是比较清晰简洁的，所以这里采用import()方式进行代码的分割和懒加载，具体操作如下：
设置 ESLint 检查代码格式时，配置动态import 的配置会报错，需要安装babel-import 插件

cnpm install --save-dev babel-plugin-syntax-dynamic-import

改写.babelrc

{ 
    "presets":[
        ["@babel/preset-env",{
            "targets":{
                "browsers":[">1%","last 2 versions"] //这里是兼容浏览器的版本
            }
        }]
    ],
    "plugins": ["@babel/transform-runtime","syntax-dynamic-import"]
}

改写webpack.config.js，取消打包公共业务代码部分
在这里插入图片描述
app.js中动态引入代码块

import(/* webpackChunkName: 'subPage'*/ "./assets/js/subPage").then(function(subPage) {
    console.log(subPage);
});
import(/* webpackChunkName: 'publicPage'*/ "./assets/js/publicPage").then(function(publicPage) {
    console.log(publicPage);
});
import(/* webpackChunkName: 'lodash'*/ "lodash").then(function(_) {
console.log(_.join(["1", "2"]));
});

export default 'mainPage'

提取分割代码块

命令行运行webpack,可以看到按需引入的子页面分别打包出来了
在这里插入图片描述

运行页面

将打包好的js引入index.html中，因为是单页应用，所以只要引用入口文件即可（即是上图中的app.bundle.js）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack4</title>
    <script src="./dist/app.bundle.js"></script>
</head>
<body>
    Hello World
</body>
</html>