webpack将依赖和项目分开各自单独打包

在开发componer的preview功能时,我希望实现一个功能:修改文件的时候实时刷新浏览器。于是我选择使用browser-sync来实现,但是仍然有一个问题,当我修改文件时,需要使用webpack对文件进行打包,也就是说我执行bs.reload()必须是在打包结束之后执行。这在逻辑上没有问题,然而有时候打包会把d3包进来,将花掉很多事件,这给开发带来了巨大浪费。于是开始思考如何提高这个效率。

最后,我想到将d3和我自己的项目文件分开,d3本身的代码我基本不会动,所以我应该每次打包的时候都不管它。除了d3,包括jquery在内的其他依赖包其实是一样的,都不需要打包。

在网上翻滚了很久之后,发现了webpack自带的CommonsChunkPlugin这个插件,它可以把依赖和项目代码分离,产生两个chunk文件,一个是项目文件,一个是依赖文件。但是最终发现CommonsChunkPlugin是个坑,它每次打包都会去产生这两个文件,而且每次的hash值都不同,于是放弃了。

在看CommonsChunkPlugin的时候,发现了DLL,也是webpack自带的。DLL方案包括两个插件,一个是DllPlugin,另一个是DllReferencePlugin。前者是将项目文件的依赖包提前打包好,同时产生一个.json文件,这个.json文件里面包含了依赖包各个模块对应的信息。而第二个插件就是使用第一个插件打包出来的依赖包,而且因为有了这个.json文件,所以在打包的时候根据这个文件里面的记录,不再打包已经打包过的模块。

举一个简单的例子:

// a.js
import $ from "jquery"

console.log($)

这是我的项目文件。它有一个依赖,jquery。现在,我希望每次打包的时候把jquery和项目文件分开来打包,或者说,第一次两个都打包,后面就永远只打包项目文件。

要实现这个,需要两步走:

// tool.js 打包程序
import webpack from "webpack"
import gulp from "gulp"

// 第一步,把依赖包先打包好,暂时跟a.js没啥关系
webpack({
    entry: {
        vendor: ["jquery"], // 这里是依赖列表
    },
    output: {
        path: ".",
        filename: "a.vendor.js",
        library: "aVendor",
    },
    plugins: [
        new webpack.DllPlugin({
            path: __dirname + "/manifest.json",
            name: "aVendor",
            context: __dirname,
        }),
    ],
}).run((error, handle) => {})

// 第二步,打包项目文件,但是不打包依赖
let compiler = webpack({
    entry: "./a.js",
    output: {
        path: ".",
        filename: "a.bundle.js",
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require(__dirname + "/manifest.json"),
        }),
    ],
})

compiler.run((error, handle) => {})

// 第三步,监听文件变动,一旦文件有改动,就直接运行第二步产生的compiler
gulp.watch("./a.js", event => compiler.run((error, handle) => {}))

上面的代码是最简单演示代码,但是基本上把问题说清楚了。注意上面代码中着色的部分,每种颜色对应的值必须相等,特别是manifest文件,它是打包时不再打包依赖的依据。

在html中,需要引入两个js文件,一个是a.vendor.js另一个是打包出来的a.bundle.js,manifest文件没用(仅在compiler.run的时候会被用到),前面一个放在前面引用。这和很多大型应用的实践相符,他们也是把依赖单独出来引用。而且在网络上传输的时候,a.vendor.js可以被浏览器缓存,当更新了项目代码之后,只需要上传a.bundle.js即可。

通过这种方式,我们可以大大节约开发时的等待时间了。

2017-02-28 |

已有1条评论
  1. […] 在《webpack将依赖和项目分开各自单独》一文中,我介绍了使用Dll方案将vendors从应用自己的逻辑代码中分离出去单独打包的一种方案。但是Dll方案更适合测试开发阶段,你想,当你测试的适合,其实更多是在写项目本身的逻辑代码,而且每次改完都希望自动刷新一下页码,看到效果。Dll方案分两步走,第一步打包所有指定的vendors,这时会得到一个json文件,第二步利用这个json文件,把项目内的代码中对应的那些vendors全部剔除掉,使用webpack内建的json机制让vendors依赖可以被后一个文件识别到。这样你每次修改完代码,只需要重复执行第二步即可,这样要打包的代码量就小很多了。 […]