本文圍繞著實現EasyDSS高性能流媒體服務器的前端框架來展開的，具體EasyDSS的相關信息可在：www.easydss.com 找到！

接上回 《高性能流媒體服務器EasyDSS前端重構(一)-從零開始搭建 webpack + vue + AdminLTE 多頁面腳手架》

在上一篇博客中, 我們白手起家, 從零搭建了 webpack + vue + AdminLTE 多頁面腳手架. 代碼在這里: easydss-web-src , 我為第一篇博客建立了單獨的分支 blog_1 , 并且我打算后面的系列都這樣, 建立一個單獨分支.

為什么要提取共用文件

我們已經創建了兩個靜態頁面: index.html 和 about.html, 對應的入口 js 分別是 index.js 和 about.js.

運行編譯

npm run build

build 兩個如此簡單的兩個頁面, 耗時 6 秒多, 可以預見在實際開發中將面臨 build 耗時長的問題. 并且我們看到 build 后的 js 文件達到 1.05MB 之大. 實際上, index.js 和 about.js 兩者是有共用部分的, 這其中包括 jquery , vue, AdminLTE 這些基礎組件. 本篇的主題就是介紹如何提取這部分共用的組件出來單獨編譯.

webpack.DllPlugin

類似于 Windows 中 DLL 動態庫的概念, 在 webpack 2 當中, 引入了 DllPlugin. 借助這個插件, 我們能夠把共用的組件 build 到一塊, 生成 vendor.js, 然后在靜態頁面中, 引用這個 vendor.js.

新建組件打包配置文件: 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: {//提取共用組件, 打包成 vendor.jsvendor: ['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.common.js','jquery$': 'admin-lte/plugins/jQuery/jquery-2.2.3.min.js'}},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}}) ] };

entry 當中, 指定哪些資源被視為共用組件
上面的配置將在當前目錄下, 創建一個 dll 目錄, 專門用來存放共用組件包 vendor.js, 并且生成一個 template.html, 這個 template.html 中包含對 vendor.js 的引用. template.html 將作為其他頁面的基礎模板使用, 這樣一般靜態頁面就能夠引用到 vendor.js 了.

webpack.DllReferencePlugin

DllReferencePlugin 這個插件用來告訴 webpack , 哪些引用到的資源已經被打包在共用組件包當中, 從而避免再次被打包.

我們來修改 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 = {//定義頁面的入口, 因為js中將要使用es6語法, 所以這里需要依賴 babel 墊片entry: {index: ['babel-polyfill', './src/index.js'],about: ['babel-polyfill', './src/about.js']},output: {path: resolve('dist'), // 指示發布目錄filename: 'js/[name].[chunkhash:8].js' //指示生成的頁面入口js文件的目錄和文件名, 中間包含8位的hash值},//下面給一些常用組件和目錄取別名, 方便在js中 importresolve: {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: {//配置 webpack 加載資源的規則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: 'url-loader?limit=10000&name=media/[name].[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'] }]),//編譯前先清除 dist 發布目錄new CleanWebpackPlugin(['dist']),//生成視頻廣場首頁, 在這個頁面中自動引用入口 index --> dist/js/index.[chunkhash:8].js//以 src/index.html 這個文件作為模板new HtmlWebpackPlugin({filename: 'index.html',title: '視頻廣場',inject: true, // head -> Cannot find element: #appchunks: ['index'],template: './dll/template.html',minify: {removeComments: true,collapseWhitespace: false}}),//生成版本信息頁面, 在這個頁面中自動引用入口 about --> dist/js/about.[chunkhash:8].js//以 src/index.html 這個文件作為模板new HtmlWebpackPlugin({filename: 'about.html',title: '版本信息',inject: true,chunks: ['about'],template: './dll/template.html',minify: {removeComments: true,collapseWhitespace: false}})] };

DllReferencePlugin 通過讀取 ./dll/vendor-manifest.json, 判斷哪些資源引用被打包在共用組件包
index.html 和 about.html 以 ./dll/template.html 作為模板, 從而獲取對 vendor.js 的引用
引入 CopyWebpackPlugin 這個插件, 負責將共用組件包依賴的資源文件拷貝到發布目錄下, 同時過濾掉發布時不需要的文件: template.html 和 vendor-manifest.json

使用新的編譯方式

因為新引入 CopyWebpackPlugin 插件, 首先, 我們安裝它

npm i copy-webpack-plugin --save-dev

修改 package.json , 添加 dll 編譯配置:

{"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","clean-webpack-plugin": "^0.1.16","css-loader": "^0.28.5","file-loader": "^0.11.2","font-awesome": "^4.7.0","html-webpack-plugin": "^2.30.1","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-template-compiler": "^2.4.2","vuex": "^2.3.1","webpack": "^3.5.5","webpack-dev-server": "^2.7.1"} }

編譯共用組件, 你可能在整個開發過程中, 只需要執行一次對共用組件的 build, 因為一般情況下, 我們很少會對它做改動, 這一點是我優化編譯時間的關鍵.

npm run dll

編譯靜態頁面, 這一次的耗時相對之前減少了 4 秒多.

npm run build

是不是離幸福又近了一點, 源碼位置: easydss-web-src/tree/blog_2

下一篇介紹在此基礎之上, 引入餓了么前端組件框架 element-ui

獲取更多信息

郵件：support@easydarwin.org

WEB：www.EasyDarwin.org

Copyright ? EasyDarwin.org 2012-2017

轉載于:https://www.cnblogs.com/babosa/p/9217787.html

總結

以上是生活随笔為你收集整理的高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。