Introduction:

I recently worked on a WebPack + Vue project and found that the packed pages were a bit bigger than expected. In order to reduce the amount of requests, the js and CSS of the page are inline in the HTML. After viewing the generated HTML code, it is found that the CSS in the VUE module introduced asynchronously is also typed on the page. Page size is a key factor affecting loading speed, and Google quickly solved this problem. Let me record that here.

Most of you who have used WebPack know that extracting CSS requires the extract-text-webpack-plugin for WebPack, and Vue is no exception. There is such a description in the official vue-Loader document

Module: {rules: [{/ js/processing introduced in CSS test: / \. CSS $/, loader: ExtractTextPlugin. Extract ({use: [{loader: 'css-loader' } ] }) }, { test: /\.vue$/, loader: 'vue-loader', options: {loaders:{ css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' }) }} } ] }, plugins: [// new ExtractTextPlugin({filename: 'CSS /[name].[hash:5].css', allChunks: true})]Copy the code

OK, after this packaging, we use the CSS code in each entry are separately packaged, at this time you can choose

Use html-webpack-plugin to generate HTML with CSS links, or html-webpack-inline-source-

Plugin inlines CSS into HTML (reduces the number of requests, useful on mobile)

However, you will find that the CSS imported asynchronously from the Vue file will also be pulled out and packaged inline into the HTML,

How to solve this problem. Use the include parameter of the loader to specify the function folder of the loader.

Use style-loader and CSS-loader for files that do not want to remove CSS. Like this

module: { rules: [ { test: /\.css$/, include: [path.resolve(__dirname, "../src/page/"), loader: ExtractTextPlugin.extract({ use: [ { loader: 'css-loader' } ] }) }, { test: /\.css$/, include: path.resolve(__dirname, "../src/components/"), loader: ['style-loader','css-loader'] }, { test: /\.vue$/, loader: 'vue-loader', options: {loaders:{ css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader'})}}}]}, plugins: [// This new ExtractTextPlugin({filename: 'css/[name].[hash:5].css', allChunks: true}) ]Copy the code

This configuration allows the code in the page directory to be removed from the CSS, and the code referenced in components to be inlined in js.

The CSS that asynchronously loads components will not be packaged into the HTML on the front screen, reducing the page size and loading speed naturally

He went up.

The comparison before and after modification is attached below.

Before the change

The modified

Obviously, the size of the modified HTML is smaller, but it is worth noting that the size of the modified HTML + JS is larger than the size before the modification.

This is because CSS is stored in JS and requires more characters to represent, so the total volume is larger. Put chunkJS inside the CSS

It is also a good idea to remove the CSS from chunkJS and load it separately.

Nevertheless how to do the effect is good, still want to test actually.