最近的專案度過了開始忙碌的基礎建設期,也慢慢輕鬆下來,準備記錄自己最近webpack優化的措施,希望有溫故知新的效果。本文主要介紹了詳解基於vue-cli優化的webpack配置,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
專案採用的是vue全家桶,建置設定都是基於vue-cli去改進的。關於原始webpack設定大家可以看下這篇文章vue-cli#2.0 webpack設定分析,文章基本上對於檔案每行程式碼都做了詳細的解釋,有助於更好的理解webpack。
仔細總結了一下,自己的最佳化基本上還是網路上流傳的那幾點
透過externals 設定來擷取常用函式庫,引用cdn
合理設定CommonsChunkPlugin
善用alias
dllplugin啟用預先編譯
happypack多核心建置專案
externals
文件位址https://doc.webpack-china.org /configuration/externals/
CommonsChunkPlugin
文件網址https://doc.webpack-china.org/plugins/commons-chunk-plugin/
CommonsChunkPlugin 插件,是一個可選的用於建立一個獨立檔案(又稱作chunk)的功能,這個檔案包括多個入口chunk 的公共模組。透過將公共模組拆出來,最終合成的檔案能夠在最開始的時候載入一次,便存起來到快取中供後續使用。這個帶來速度上的提升,因為瀏覽器會迅速將公共的程式碼從快取中取出來,而不是每次造訪一個新頁面時,再去加載一個更大的檔案。
resolve.alias
文件位址https://doc.webpack-china.org/configuration/resolve/#resolve-alias
建立import 或require 的別名,來確保模組引入變得更簡單。例如,一些位於 src/ 資料夾下的常用模組:不過經過自己的實作最後三點是對自己專案優化最大的。文章也主要對後面幾點詳細說明一下
原來打包一個專案所需的時間基本上在40秒左右,那再經過後面三步驟優化大概要多久呢
1.使用dllplugin預編譯與引用首先為什麼要引用Dll?在網路上瀏覽了一些文章後,我發現上除了加快建置速度以外,使用webpack的dll還有一個好處。
那麼如何使用Dll去優化專案呢
const webpack = require('webpack'); const path = require('path'); module.exports = { entry: { //你需要引入的第三方库文件 vendor: ['vue','vuex','vue-router','element-ui','axios','echarts/lib/echarts','echarts/lib/chart/bar','echarts/lib/chart/line','echarts/lib/chart/pie', 'echarts/lib/component/tooltip','echarts/lib/component/title','echarts/lib/component/legend','echarts/lib/component/dataZoom','echarts/lib/component/toolbox'], }, output: { path: path.join(__dirname, 'dist-[hash]'), filename: '[name].js', library: '[name]', }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, 'dll', '[name]-manifest.json'), filename: '[name].js', name: '[name]', }), ] };
webpack -p --progress --config build/webpack.dll.config.js
const manifest = require('./dll/vendor-manifest.json'); ... ..., plugin:[ new webpack.DllReferencePlugin({ context: __dirname, manifest, }), ]
這時候再執行webpack指令,可以發現時間直接從40秒銳減到了20s左右,整整快了一倍有木有(不知道是不是因為自己依賴庫太多了才這樣的,手動摀臉)。
2.happypack多執行緒編譯
var HappyPack = require('happypack'); ... ... modules:{ rules : [ ... { test: /\.js$/, loader:[ 'happypack/loader?id=happybabel'], include: [resolve('src')] }, ... ] }, ... ... plugin:[ //happypack对对 url-loader,vue-loader 和 file-loader 支持度有限,会有报错,有坑。。。 new HappyPack({ id: 'happybabel', loaders: ['babel-loader'], threads: 4,//HappyPack 使用多少子进程来进行编译 }), new HappyPack({ id: 'scss', threads: 4, loaders: [ 'style-loader', 'css-loader', 'sass-loader', ], }) ]
这时候再去执行编译webpack的代码,打印出来的console则变成了另外一种提示。而编译时间大概从20s优化到了15s左右(感觉好像没有网上说的那么大,不知道是不是因为本身js比重占据太大的缘故)。
3.善用alias
3.配合resolve,善用alias
本来是没有第三点的,只不过在搜索网上webpack优化相关文章的时候,看到用人提到把引入文件改成库提供的文件(原理我理解其实就是1.先通过resolve指定文件寻找位置,减小搜索范围;2.直接根据alias找到库提供的文件位置)。
vue-cli配置文件中提示也有提到这一点,就是下面这段代码
resolve: { //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名 extensions: ['.js', '.vue', '.json'], //模块别名定义,方便后续直接引用别名,无须多写长长的地址 alias: { 'vue$': 'vue/dist/vue.esm.js',//就是这行代码,提供你直接引用文件 '@': resolve('src'), } },
然后我将其他所有地方关于vue的引用都替换成了vue$之后,比如
// import 'vue'; import 'vue/dist/vue.esm.js';
时间竟然到了12s,也是把我吓了一跳。。。
然后我就把jquery,axios,vuex等等全部给替换掉了。。。大概优化到了9s左右,美滋滋,O(∩_∩)O~~
4.webpack3升级
本来是没第四点,刚刚看到公众号推出来一篇文章讲到升级到webpack3的一些新优点,比如Scope Hoisting(webpack2升级到webpack3基本上没有太大问题)。通过添加一个新的插件
// 2017-08-13配合最新升级的webpack3提供的新功能,可以使压缩的代码更小,运行更快 ... plugin : [ new webpack.optimize.ModuleConcatenationPlugin(), ]
不过在添加这行代码之后,构建时间并没有太大变化,不过运行效率没试过,不知道新的效果怎么样
好了基本上感觉就是以上这些效果对项目的优化最大,虽然没有到网上说的那种只要3~4秒时间那么变态,不过感觉基本8,9秒的时间也可以了。
相关推荐:
以上是實例詳解vue-cli優化的webpack配置的詳細內容。更多資訊請關注PHP中文網其他相關文章!