怎样令webpack的构建加快十倍、DllPlugin的用法

最新推荐文章于 2024-06-12 19:50:40 发布

Technofiend

最新推荐文章于 2024-06-12 19:50:40 发布

阅读量1.3w

点赞数

分类专栏： JS 文章标签： nodejs

本文链接：https://blog.csdn.net/technofiend/article/details/52850596

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在使用webpack过程中，本人也发现发现构建速度非常慢，于是google一番，发现一篇文章。
原文地址

内容过程大概是：
环境：nodejs、npm(觉得慢可以用cnpm)

安装webpack、react、react-dom

npm install --save-dev webpack
npm install --save-dev react
npm install --save-dev react-dom

先建立三个文件

webpack.dll.config.js 文件

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

module.exports = {
  entry: {
      vendor: ['react', 'react-dom']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js',
    /**
     * output.library
     * window.${output.library}に定義される
     * 今回の場合、`window.vendor_library`になる
     */
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      /**
       * path
       * manifestファイルの出力先
       * [name]の部分はentryの名前に変換される
       */
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
      /**
       * name
       * どの空間（global変数）にdll bundleがあるか
       * output.libraryに指定した値を使えばよい
       */
      name: '[name]_library'
    })
  ]
};

webpack.config.js 文件

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

module.exports = {
    entry: {
        'dll-user': ['./index.js']
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            /**
            * manifestファイルをロードして渡す
            */
            manifest: require('./dist/vendor-manifest.json')
        })
    ]
};

index.js 文件

var React = webpack --config webpack.dll.config.js('react');
var ReactDOM = require('react-dom');
console.log("dll's React:", React);
console.log("dll's ReactDOM:", ReactDOM);

建立后文件后执行

webpack --config webpack.dll.config.js

将会在当前目录生成dist目录，该目录下面的文件有 vendor.dll.js、vendor-manifest.json

再执行

webpack --config webpack.config.js

将会在当前目录生成dist目录，该目录下面当前的文件有 vendor.dll.js、vendor-manifest.json、vendor.dll.js

现在，我们创建一个测试文件
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="./dist/vendor.dll.js"></script>
</head>
<body>

    <script type="text/javascript" src="./dist/dll-user.bundle.js"></script>
</body>
</html>

打开这个index.html文件，使用chrome按F12调试，打开console选项卡，将会看到类似

Download the React DevTools and use an HTTP server (instead of a file: URL) for a better development experience: https://fb.me/react-devtools

dll-user.bundle.js:56 dll's React: Object {Children: Object, PropTypes: Object, DOM: Object, version: "15.3.2"}

dll-user.bundle.js:57 dll's ReactDOM: Object {version: "15.3.2"}

的内容。则测试成功。

原文还提及构建时的缓存。

请转脚步到原文。

webpack.config.js文件中的下面代码是重点。

    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            /**
            * manifestファイルをロードして渡す
            */
            manifest: require('./dist/vendor-manifest.json')
        })
    ]

如果去除掉，生成速度将会慢很多倍。主要原因是打包的时候，将react、react-dom等等等等的插件都塞到一个包里面，不慢才怪。

要是在本地开发调试的时候，没改一下bug就得等很久很久的话，那也不太划算。

webpack管理模块的确是挺方便的，不过我还就觉得不要都打包在一个js上面。

上面的例子中的dist就是生产环境引用的js了。

比如我来说，我会每个网页的引用的js都可能不同，所以我打包时也不会将所有js打包到一个上面。

Technofiend

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
怎样令webpack的构建加快十倍、DllPlugin的用法

原文地址环境：nodejs、npm(觉得慢可以用cnpm)npm install --save-dev webpacknpm install --save-dev reactnpm install --save-dev react-dom先建立三个文件webpack.dll.config.js 文件const path = require('path');const webpack =
复制链接

扫一扫

专栏目录