webpack performance optimization

There are many ways to optimize Webpack performance. The reason why dll is explained separately in this article is because dll is the simplest, crudest and extremely effective optimization method. This article mainly introduces the detailed explanation of webpack performance optimization-DLL. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

In the normal packaging process, many libraries you reference such as: jquery, bootstrap, react, react-router, redux, antd, vue, vue-router, vuex, etc. will also be packaged into the bundle in the file. Since the contents of these libraries will basically never change, adding them to each package is undoubtedly a huge waste of performance.

Dll technology is to package all introduced libraries into a dll.js file for the first time, and package the content written by yourself into a bundle.js file, so that subsequent packaging only needs to process the bundle part. .

Taking a Vue project as an example, first create a file named webpack.dll.config.js

var path = require("path"),
　　fs = require('fs'),
　　webpack = require("webpack");

var vendors = [
　　'vue', 
　　'vue-router', 
　　'vuex'
];

module.exports = {
　　entry: {
　　　　vendor: vendors
　　},
　　output: {
　　　　path: path.join(__dirname, "dist"),
　　　　filename: "Dll.js",
　　　　library: "[name]_[hash]"
　　},
　　plugins: [
　　　　new webpack.DllPlugin({
　　　　　　path: path.join(__dirname, "dist", "manifest.json"),
　　　　　　name: "[name]_[hash]",
　　　　　　context: __dirname
　　　　})
　　]
};

The function of this file is to convert vue , vue-router and vuex are merged and packaged into a static resource package named Dll.js, and a manifest.json file is generated to facilitate reference to the modules in Dll.js.

It should be noted that executing the webpack command will execute the file named webpack.config.js or webpackfile.js in the directory by default. Therefore, you need to manually specify the file through the --config command, and finally add the -p command to compress Dll.js.

$ webpack --config webpack.dll.config.js -p

In this way, an additional dist folder will be added to the project root directory, which contains the compressed Dll.js and manifest.json files.

The content of the manifest.json file is as follows. Give each module an ID for reference.

{
 "name": "vendor_2beb750db72b1cda4321",
 "content": {
  "./node_modules/process/browser.js": {
   "id": 0,
   "meta": {}
  },
  "./node_modules/vue-router/dist/vue-router.esm.js": {
   "id": 1,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
  "./node_modules/vue/dist/vue.runtime.esm.js": {
   "id": 2,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
//.......

Finally add the reference in webpack.config.js. Add the DllReferencePlugin plugin in the plugins attribute and specify the reference path to the manifest.json file.

//...
plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./dist/manifest.json')
  })
]

After ensuring successful execution of the webpack.dll.config.js file, execute webpack -p to package the project.

You can see that the files packaged in the Dll file are delegated (delegated) instead of being directly entered into the bundle file.

In this way, we will package all the resources, and the generated dist directory is as follows:

However, the dist folder is not enough to be used as a complete project. For an html file, I created a file named pack.js and used the fileSystem of nodejs to modify and copy the html file.

pack.js

##

var fs = require('fs');

fs.readFile('./index.html', 'utf8', (err, data) => {
  if (!err) {
    var dataStr = data.toString(),
    timestamp = (new Date()).getTime();
  
    dataStr = dataStr
          .replace('bundle.js', 'bundle.js?v='+timestamp)
          .replace(&#39;<!-- dll -->&#39;, &#39;<script src="./dist/Dll.js?v=&#39;+ timestamp +&#39;"></script>&#39;);

    fs.writeFile(&#39;./dist/index.html&#39;, dataStr, (error) => {
      if (!error) {
        console.log(&#39;HTML file copy successfully&#39;);
      } else {
        console.log(error);
      }
    });
  } else {
    console.log(err);
  }
});

We need to add the placeholder character of in the entry html of the module, pack The function of .js is to copy the html file to the dist directory, replace with the script tag referencing Dll.js, and add a timestamp after referencing the file.

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<!-- dll -->
<script src="./bundle.js"></script>
</body>
</html>

After executing webpack -p packaging, enter the following command to run pack.js, and an html file will be generated in the dist directory.

$ node pack.js

The content is as follows:

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<script src="./dist/Dll.js?v=1488250309725"></script>
<script src="./bundle.js?v=1488250309725"></script>
</body>
</html>

In this way, the dist folder will be used as A complete, compressed and obfuscated project that does not require any manual operations can be deployed directly online.

The actual project template reference address is as follows. Since the author is a dual-wielding developer of React and Vue, I created two templates for later scaffolding tooling through yomen(yo) and the like.

Related recommendations:

Use mockjs to simulate back-end data in vue, vuecli, and webpack

loader analysis of webpack3

Detailed explanation of webpack configuration and back-end rendering

The above is the detailed content of webpack performance optimization. For more information, please follow other related articles on the PHP Chinese website!