专栏首页YuanXin三:多页面解决方案--提取公共代码

三:多页面解决方案--提取公共代码

这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack34.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上,更加方便和清晰。

代码目录结构如下图所示:

最终,成功提取公共代码,如下图所示:

这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack34.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上,更加方便和清晰。

>>> 本节课源码

>>> 所有课程源码

1. 准备工作

按照惯例,我们在src/文件夹下创建pageA.jspageB.js分别作为两个入口文件。同时,这两个入口文件同时引用subPageA.jssubPageB.js,而subPageA.jssubPageB.js又同时引用module.js文件。

代码目录结构如下图所示:

希望大家理清逻辑关系,下面从底层往上层进行代码书写。

module.js:

export default "module";

subPageA.js:

import "./module";
export default "subPageA";

subPageB.js:

import "./module";
export default "subPageB";

正如我们所见,subPageA.jssubPageB.js同时引用module.js

最后,我们封装入口文件。而为了让情况更真实,这两个入口文件又同时引用了lodash这个第三方库

pageA.js:

import "./subPageA";
import "./subPageB";

import * as _ from "lodash";
console.log("At page 'A' :", _);

export default "pageA";

pageB.js:

import "./subPageA";
import "./subPageB";

import * as _ from "lodash";
console.log("At page 'B' :", _);

export default "pageB";

好了,到此为止,需要编写的代码已经完成了。>>> src 文件夹项目源码

2. 编写webpack配置文件

首先我们应该安装先关的库,创建package.json,输入以下内容:

{
    "devDependencies": {
        "webpack": "^4.15.1"
    },
    "dependencies": {
        "lodash": "^4.17.10"
    }
}

在命令行中运行npm install即可。

然后配置webpack.config.js文件。文件配置如下:

const webpack = require("webpack");
const path = require("path");

module.exports = {
    // 多页面应用
    entry: {
        pageA: "./src/pageA.js",
        pageB: "./src/pageB.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    },
    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
                }
            }
        }
    }
};

着重来看optimization.splitChunks配置。我们将需要打包的代码放在cacheGroups属性中。

其中,每个键对值就是被打包的一部分。例如代码中的commonvendor。值得注意的是,针对第三方库(例如lodash)通过设置priority来让其先被打包提取,最后再提取剩余代码。

所以,上述配置中公共代码的提取顺序其实是:

... ...
vendor: {
  name: "vendor",
  test: /[\\/]node_modules[\\/]/,
  chunks: "all",
  priority: 10
},
common: {
    name: "common",
    chunks: "all",
    minSize: 1,
    priority: 0
}
... ...

3. 打包和引用

命令行中运行webpack即可打包。可以看到,我们成功提取了公共代码,如下图所示:

最后,打包的结果在dist/文件夹下面,我们要在index.html中引用打包好的js文件,index.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>Documenttitle>
    head>

    <body>
        <script src="./dist/common.chunk.js">script>
        <script src="./dist/vendor.chunk.js">script>
        <script src="./dist/pageA.bundle.js">script>
        <script src="./dist/pageB.bundle.js">script>
    body>
html>

使用 Chrome 或者 Firfox 打开index.html,并且打开控制台即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一:打包JS

    创建vendor文件夹,其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。

    心谭博客
  • 八:JS Tree Shaking

    是的,在webpack v4中,不再需要配置UglifyjsWebpackPlugin。(详情请见:文档) 取而代之的是,更加方便的配置方法。

    心谭博客
  • 十四:Clean Plugin and Watch Mode

    在实际开发中,由于需求变化,会经常改动代码,然后用 webpack 进行打包发布。由于改动过多,我们/dist/目录中会有很多版本的代码堆积在一起,乱七八糟。

    心谭博客
  • 【专业技术】揭秘安卓浏览器如何注入javascript脚本

    Android中向webview注入js代码可以通过webview.loadUrl("javascript:xxx")来实现,然后就会执行javascript后...

    程序员互动联盟
  • 利用 three.js 开发微信小游戏的尝试

    这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧。

    bering
  • 如何从Node.js开始-Visual Studio2017

    好吧,简单地说,Node.js是一个服务器框架,可以在Windows,Linux,Unix,Mac OS X等各种平台上运行。它是开源的。

    ccf19881030
  • 前端缓存

    https://juejin.im/post/5a098b5bf265da431a42b227

    城市中的游牧民族
  • Webpack第三天

    我们已经能打包能启动了,现在我们要继续开发。开发的时候我们要一直刷新才能出现,这很浪费时间,而webpack自带了热更新。

    wade
  • 对于零基础同学来讲,javascript有多难掌握?

    你是零基础,那么你用什么方式,可以快速的实现js的运用自如呢? Javascript是一门脚本语言,它没有复杂的内存管理,只有一个进程,变量随便什么都可以储存...

    web前端教室

扫码关注云+社区

领取腾讯云代金券