溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一個基于vue-cli webpack2模板創建的項目.項目中使用到了vue+vue-router+axios+muse-ui+iview
現在構建一次需要的時間大概是40s左右.真心受不了.雖然在開發過程中,我們不太需要關心構建時間.但是如果在開發hybridApp時,構建的次數就會增多.
一般我們可以把項目分為三部分.
| 分類 | 說明 | 變動頻率 |
|---|---|---|
| vendor_library | 核心庫 | 低 |
| vendor | 一般項目依賴 | 中等 |
| code | 業務邏輯 | 高 |
vendor_library:比如vue,vue-router,axios 這些變動頻率極低的文件可以利用 DllPlugin 和 DllReferencePlugin 進行預編譯.
vendor,code在開發階段,每次構建都需要編譯.但是一旦完成該次開發任務,應該調整vendor 是否加入vendor_library.
BundleAnalyzerPlugin 的插件使用
BundleAnalyzerPlugin 是分析 Webpack 生成的包體組成并且以可視化的方式反饋給開發者的插件。
vue已經默認集成了該插件. 如果你運行 npm run build –report.就能看到當前項目的依賴情況.然后做出相應調整.
優化方向
按需加載
muse-ui,iview 都提供了按需加載的方式,按照文檔調整即可.
| 分類 | 耗時 | muse-ui | iview |
|---|---|---|---|
| before | 13256ms | 234KB | 337KB |
| after | 43211ms | 79KB | 75KB |
先看結果...你沒看錯,'優化后',時間竟然變長了...😂.不過這也正常,之前的依賴直接獲取的是dist目錄的文件,現在需要在src目錄下獲取.增加了編譯的過程.
但是文件大小的減少還是喜人的.當然,這取決于項目中對模塊的使用程度.在我們這個項目中iview只使用了的四個控件.結果上看,顯然還是按需加載比較劃算.不過這個不算是時間上的優化,只是因為dll可以解決構建時間問題,使按需加載變的更好用.
DllPlugin 和 DllReferencePlugin 預編譯資源模塊
Dll這個概念應該是借鑒了Windows系統的dll。一個dll包，就是一個純純的依賴庫，它本身不能運行，是用來給你的app引用的。
打包dll的時候，Webpack會將所有包含的庫做一個索引，寫在一個manifest文件中，而引用dll的代碼（dll user）在打包的時候，只需要讀取這個manifest文件，就可以了。
這么一來有幾個好處：
Dll打包以后是獨立存在的，只要其包含的庫沒有增減、升級，hash也不會變化，因此線上的dll代碼不需要隨著版本發布頻繁更新。
App部分代碼修改后，只需要編譯app部分的代碼，dll部分，只要包含的庫沒有增減、升級，就不需要重新打包。這樣也大大提高了每次編譯的速度。
假設你有多個項目，使用了相同的一些依賴庫，它們就可以共用一個dll。
網上抄的… 其實意思就是我們可以把項目的公共模塊,基本不會改動的模塊.想我們剛才說的定義為vendor_library的內容,進行預編譯編譯.以后在項目構建過程中,vendor_library部分直接引用,就不需要再編譯了.
這也是為什么按需加載可以得到更好的使用,正常構建流程,因為使用了按需加載,會導致每次的構建都比使用全量加載用時要長.而使用dll,核心庫只需要編譯一次,以后直接引用即可.
先來看一下改進結果：
| 分類 | 耗時 |
|---|---|
| before | 57192ms |
| after | 7890ms |
哈哈,有沒有快到飛起！！！
DllPlugin 和 DllReferencePlugin 使用
新建webpack.dll.conf.js文件
//webpack.dll.conf.js
process.env.NODE_ENV = 'production'
const path = require('path');
var utils = require('./utils')
var vueLoaderConfig = require('./vue-loader.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const webpack = require('webpack');
//vue項目默認有一個static目錄.我就把導出目錄放在了static/dll/目錄下
const srcPath = path.join(__dirname, '../static/dll/');
//需要編譯的模塊
const vendors = ['vue/dist/vue.esm.js',
'vue-router',
'vue-localstorage',
'material-design-icons/iconfont/material-icons.css',
'iview/dist/styles/iview.css',
'iview/src/components/tag/tag.vue'
'muse-ui/src/appBar'
];
webpackConfig = {
entry: {
vendor: vendors
},
resolve: {
extensions: ['.js', '.vue', '.json']
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /iview.src.*?js$/,
loader: 'babel-loader'
},
{
test: /muse-ui.src.*?js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader"
})
},
{
test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
publicPath: './',
limit: 1000,
name: 'fonts/[name].[ext]'
}
}]
},
output: {
path: srcPath, // 輸出的路徑
filename: '[name].dll.js', // 輸出的文件，將會根據entry命名為vendor.dll.js
library: '[name]_library' // 暴露出的全局變量名
},
plugins: [
new ExtractTextPlugin({
filename: '[name].dll.css'
}),
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
new webpack.optimize.UglifyJsPlugin({ // uglifjs壓縮
compress: {
warnings: false
}
}),
new webpack.DllPlugin({
path: path.join(srcPath, '[name]-mainfest.json'), // 描述依賴對應關系的json文件
name: '[name]_library',
context: __dirname // 執行的上下文環境，對之后DllReferencePlugin有用
})
]
}
if (process.env.npm_config_report) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig;
其實這就是一個正常的構建文件.根據你的項目進行修改即可.唯一不同的是在plugins多了一個DllPlugin.他會生成一個描述依賴對應關系的json文件.
static目錄如下:
|____dll | |____fonts | |____vendor-mainfest.json | |____vendor.dll.css | |____vendor.dll.js
修改模板index.html 根據你的構建結果做修改.
//head 標簽 <link type="text/css" rel="stylesheet" href="./static/dll/vendor.dll.css" rel="external nofollow" > //body 標簽 <script src="./static/dll/vendor.dll.js"></script>
修改webpack.base.conf.js
plugins: [
...,
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../static/dll/vendor-mainfest.json') // 指向生成的json文件
})
]
執行
webpack --config ./build/webpack.dll.conf.js
你也可以將該語句放入npm run 中.'build:dll:report' 是為了優化dll依賴關系,添加的另外一條命令.上文已經提過,我們可以借用BundleAnalyzerPlugin插件查看當前包的依賴情況,和包體組成情況.
//package.json
"scripts":{
"build:dll": "webpack --config ./build/webpack.dll.conf.js",
"build:dll:report": "npm run build:dll --report"
}
npm run build …看看這次的構建時間吧
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
