Before I wrote a webpack packaging optimization direction guide (theory) article, said at the end of the next article to bring you packaging practice, I renegged, mainly because there is no good problem to share with you, so it has been delayed!

The reason for this article is that our project group took over an old project before, this project is understood to be a hastily put together project, the code inside will not be mentioned, I know all about it!! , one day the old shout I looked at his strong brush page, app. Js under the development environment unexpectedly 50+ MB, I rely on! It was unbearable, and then there was this article.

The overall analysis

There is a demand, so our goal is very clear! Keep the packaged app.js file as small as possible. So download tools to analyze first.

Download Webpack Bundle Analyzer

npm install --save-dev webpack-bundle-analyzer
Copy the code
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; . configureWebpack: { plugins: [new BundleAnalyzerPlugin()], }, ...Copy the code

After installing the plug-in, let’s try it out with a development environment package! See the picture below:

View the package file size

From the figure, we can see that there are two large packages in the app package file, one is the style file and the other is the third-party package of node_modules. Therefore, our idea is to separate the style and node_modules from the app file and put a separate file. Now let’s do it!! .

Stripping node_modules

We use splitChunks in Optimization to split and optimize our chunks. We set the chunks to ‘all’. If you want to see more, please click on the link to see the specific splitChunks.

So optimize our configuration: set chunks to “all”

configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: "all",
      },
    },
  },
Copy the code

Now let’s run the package command in the development environment to view the package file.

From the picture, we can see that the third-party package has been removed from our app file. At present, our package file is 27.54MB, which is far from what we want. As you can also see in the figure, our styles still take up a lot of space, so let’s peel off THE CSS styles

Stripping style file

There are many ways to strip style files, such as using the mini-CSs-extract-plugin. In our current version, for example, a cache group is used to strip style files. If you want to see more please click the link to check it out.

We continue to optimize and write the following configuration:

configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: "all",
        cacheGroups: {
          styleStripping: {
            name: "styleStripping",
            test: /\.(c|sc)ss$/,
            chunks: "all",
            enforce: true,
          },
        },
      },
    },
  },
Copy the code

Now let’s run the package command in the development environment to view the package file.

We can see from the picture that the style file has been stripped out. The size of our packaged APP file is 4.2MB. So we’re done! This is the APP file for optimizing the development environment of the project. I have checked the packaging file of the production environment and do not need to optimize for the time being.

In fact, we can continue to optimize the packaging speed by making Echarts, G2, Highcharts,moment and other packages that occupy a large space into Dll dynamic link libraries, or we can use CDN links with the help of externals. Compressed CSS, compressed JS, lazy loading, etc. Read this article if you want to learn more about packaging optimization recommendations.

Past wonderful

  • Can you explain the principle of Styleds – Components?
  • Interviewer: Can you talk about the difference between extends and a parasitic composite inheritance stereotype?
  • The front end Leader asked me to talk to my colleagues about the event loop
  • React compares the status update mechanism with Vue
  • Do you React to a tree shuttle box?
  • 10 Mistakes to avoid when Using React
  • Webpack Packaging Optimization Direction Guide (Theory)
  • What if VUE encounters drag-and-drop dynamically generated components?
  • JS Coding tips, most people can’t!!
  • TypeScript doesn’t it smell good? Come on!