Connect back to the

In our last blog, we built the webPack + Vue + AdminLTE multi-page scaffolding from scratch. Here’s the code: easydss-web-src. I created a separate branch, blog_1, for the first blog post, and I plan to do this for the rest of the series.

Why extract common files

We have created two static pages: index.html and about.html, with the corresponding entry js being index.js and about.js, respectively.

Running compiled

npm run build
Copy the code

Build two such simple two pages, take more than 6 seconds, you can expect to face the problem of long build time in actual development. And we see that the build js file is 1.05MB in size. In fact, index.js and about.js share some common components, including jquery, vue and AdminLTE. The topic of this article is how to extract these common components and compile them separately.

webpack.DllPlugin

Similar to the concept of DLL dynamic libraries in Windows, the DllPlugin was introduced in WebPack 2. With this plugin, we can build common components together, generate vendor.js, and then reference this vendor.js in static pages.

Create the component packaging configuration file: webpack.dll.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const webpack = require('webpack'); const path = require('path'); function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { entry: {// Extract the common component and package it as vendor.js vendor: ['jquery', 'vue', 'vuex', 'babel-polyfill', 'font-awesome/css/font-awesome.css', 'admin-lte/bootstrap/css/bootstrap.css', 'admin-lte/dist/css/AdminLTE.css', 'admin-lte/dist/css/skins/_all-skins.css', 'admin-lte/bootstrap/js/bootstrap.js', 'admin-lte/dist/js/app.js'] }, output: { path: resolve('dll'), filename: 'js/[name].[chunkhash:8].js', library: '[name]_library' }, resolve: { extensions: ['.js', '.vue', '.json'], alias: {' vue $' : 'vue/dist/vue.com mon. Js',' jquery $' : 'admin - lte/plugins/jquery/jquery - 2.2.3. Min. Js'}}, the module: {rules: [{ test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader?limit=10000&name=images/[name].[hash:8].[ext]' }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader?limit=10000&name=fonts/[name].[hash:8].[ext]' }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader?limit=10000&name=media/[name].[hash:8].[ext]' }] }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', "window.jQuery": 'jquery', "window.$": 'jquery' }), new webpack.HashedModuleIdsPlugin(), new CleanWebpackPlugin(['dll']), new webpack.DllPlugin({ path: resolve("dll/[name]-manifest.json"), name: "[name]_library", context: __dirname }), new HtmlWebpackPlugin({ filename: 'template.html', title: '<%= htmlWebpackPlugin.options.title %>', inject: 'head', chunks: ['vendor'], template: './src/template.html', minify: { removeComments: true, collapseWhitespace: false } }) ] };Copy the code

The configuration above will create a DLL directory in the current directory for storing the shared component package Vendor.js, and generate a template.html. This template.html contains a reference to vendor.js. Template.html will be used as the base template for other pages, so that static pages can reference vendor.js.

webpack.DllReferencePlugin

The DllReferencePlugin is used to tell WebPack which referenced resources are already packaged in a common component package, so that they are not packaged again.

Let’s modify webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const webpack = require('webpack'); const path = require('path'); require("babel-polyfill"); Function resolve(dir) {return path.resolve(__dirname, dir)} module.exports = {// define the entry of the page. {index: ['babel-polyfill', './ SRC /index.js'], about: ['babel-polyfill', './ SRC /about.js']}, output: {path: resolve('dist'), // 'js/[name].[chunkhash:8].js' // indicates the directory and filename of the generated page-entry js file, which contains the 8-bit hash value}. { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.common.js', 'jquery$': 'admin - lte/plugins/jQuery/jQuery - 2.2.3. Min. Js',' SRC ': resolve (' SRC'), 'assets' : resolve (' SRC/assets'),' components' : Resolve (' SRC /components')}}, module: {// configure webpack to load resources rules: [{test: /\.js$/, loader: 'babel-loader', include: [resolve('src')] }, { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.less$/, loader: "less-loader" }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader?limit=10000&name=images/[name].[hash:8].[ext]' }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader?limit=10000&name=fonts/[name].[hash:8].[ext]' }, { test: /\.(swf|mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: [hash:8].[ext]'}]}, plugins: [// new webpack.providePlugin ({$: 'jquery', jQuery: 'jquery', "window.jQuery": 'jquery', "window.$": 'jquery' }), new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./dll/vendor-manifest.json') }), new CopyWebpackPlugin([ { from: 'dll', ignore: ['template.html', 'vendor-manifest.json']}]), new CleanWebpackPlugin(['dist']), Dist /js/index.[chunkhash:8].js // SRC /index.html as a template new HtmlWebpackPlugin({filename: 'index.html', title: 'video square ', inject: true, // head -> Cannot find Element: #app chunks: ['index'], template: './dll/template.html', minify: { removeComments: true, collapseWhitespace: False}}), // generate version information page, Dist /js/about.[chunkhash:8].js // SRC /index.html as a template new HtmlWebpackPlugin({filename: 'about.html', title: 'version info ', Inject: true, chunks: ['about'], template: './ DLL /template.html', minify: { removeComments: true, collapseWhitespace: false } }) ] };Copy the code

DllReferencePlugin reads./ DLL /vendor-manifest.json Use./ DLL /template. HTML as a template to get a reference to vendor.js. Import CopyWebpackPlugin. Copy the resource files dependent on the shared component package to the release directory, and filter out the unnecessary files: template. HTML and vendor-manifest.json

Use the new compilation method

Because of the new introduction of the CopyWebpackPlugin, first, let’s install it

npm i copy-webpack-plugin --save-dev
Copy the code

Modify package.json, add DLL compiler configuration:

{" name ":" easydss - web - SRC ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" build ": "webpack --progress --hide-modules", "dll": "webpack --progress --hide-modules --config ./webpack.dll.config.js", "start": "webpack-dev-server --open", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": {" admin - lte ", "^ 2.3.11", "Babel - core" : "^ 6.26.0", "Babel - loader" : "^ 7.1.1", "Babel - polyfill" : "^ 6.26.0", "Babel - preset - es2015" : "^ 6.24.1", "Babel - preset - stage - 2" : "^ 6.24.1", "the clean - webpack - plugin" : "^ 0.1.16 CSS -", "loader" : "^ 0.28.5", "file - loader" : "^ 0.11.2", "the font - awesome" : "^ 4.7.0", "HTML - webpack - plugin" : "^ 2.30.1" and "less", "^ 2.7.2", "less - loader" : "^ 4.0.5", "style - loader" : "^ 0.18.2", "url - loader" : "^ 0.5.9", "vue" : "^" 2.4.2, "vue - loader" : "^ 13.0.4", "vue - the template - the compiler" : "^" 2.4.2, "vuex" : "^ 2.3.1", "webpack" : "^3.5.5", "webpack-dev-server": "^2.7.1"}}Copy the code

To build a common component, you may only need to do a build of a common component once during the entire development process, since we rarely change it, which is my key to optimizing build time.

npm run dll
Copy the code

Compiling static pages takes more than four seconds less than before.

npm run build
Copy the code

WEB: www.liveqing.com

On this basis, the next article introduces element-UI, the front-end component framework of Ele. me