摘要:一緩存失效改變了的一點兒代碼,打包的就會改變導致每次發布,的緩存都會失效。為了解決上述問題,在網上查找資料后,找到使用這個方案。三對比結果優化前筆記本上打包時間為,優化后筆記本打包時間為,同時也增加了這些庫的緩存。
問題
在前端項目中,我們希望第三方庫(vendors)和自己寫的代碼可以分開打包,vue-cli也幫我們配好了webpack的CommonsChunkPlugin,但是在使用vue-cli的打包的過程中有一些痛點。
一、verdors緩存失效改變了app.js的一點兒代碼,verdors打包的chunkhash就會改變,導致每次發布,vendors的緩存都會失效。這樣增加了用戶的流量消耗和首屏加載時間。
二、項目打包時間過長在公司的臺式機打包一次要花費30s,在個人筆記本上則需要花費40s之多。
為了解決上述問題,在網上查找資料后,找到使用 webpack dll這個方案。
解決過程 一、編寫dll配置文件先貼上我的webpack.dll.conf.js配置代碼
</>復制代碼
var path = require("path");
var webpack = require("webpack");
var config = require("../config")
var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 提取css
var AssetsPlugin = require("assets-webpack-plugin"); // 生成文件名,配合HtmlWebpackPlugin增加打包后dll的緩存
module.exports = {
entry: {
libs: [
"vue-infinite-scroll",
"vue-cookie",
"jquery",
"iscroll",
"weui.js",
"video.js",
"babel-polyfill",
"resetcss",
"font-awesome/css/font-awesome.min.css",
"video.js/dist/video-js.min.css",
]
},
output: {
path: path.resolve(__dirname, "../public"),
filename: "[name].[chunkhash:7].js",
library: "[name]_library"
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, "../public/[name]-mainfest.json"),
name: "[name]_library",
context: __dirname // 執行的上下文環境,對之后DllReferencePlugin有用
}),
new ExtractTextPlugin("[name].[contenthash:7].css"),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
}),
new AssetsPlugin({
filename: "bundle-config.json",
path: "./public"
}),
],
module: {
rules: [
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader",
query: {
limit: 10000,
name: "img/[name].[hash:7].[ext]"
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: "url-loader",
query: {
limit: 10000,
name: "fonts/[name].[hash:7].[ext]"
}
}
]
},
}
1、entry配置需要dll打包的庫
2、module配置處理對應文件類型的loader
3、增加 webpack.DllPlugin插件
1、path:生成mainfest.json文件的絕對路徑。mainfest.json里面的內容為所有被打包到dll.js文件模塊id的映射。
2、name:webpack打包時mainfest.json包含的庫的暴露出來的函數名名
3、contenxt(可選):引入manifest文件的context,默認為webpack的context
二、修改webpack.base.conf.js在webpack.base.conf.js的plugins增加
</>復制代碼
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require("../public/libs-mainfest.json") // 指向生成的manifest.json
}),
注:上面提到通過AssetsPlugin和HtmlWebpackPlugin給打包的dll.js各dll.css增加緩存機制
AssetsPlugin生成的bundle-config.js
</>復制代碼
{"libs":{"js":"libs.f7d8ef0.js","css":"libs.e2245d7.css"}}
webpack.dev.conf.js文件增加以下代碼
</>復制代碼
var bundleConfig = require("../public/bundle-config.json")
new HtmlWebpackPlugin({
filename: "index.html",
template: "index.html",
inject: true,
libJsName:bundleConfig.libs.js,
libCssName:bundleConfig.libs.css,
env:config.dev.env,
}),
在index.html引入生成的dll.js,dll.css
</>復制代碼
上面為開發環境的配置,生產環境對應修改就可以了。
增加build.dll.js文件,
</>復制代碼
var path = require("path");
var utils = require("./utils")
var webpack = require("webpack");
var config = require("../config")
var utils = require("./utils")
var dllConfig = require("./webpack.dll.conf");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var AssetsPlugin = require("assets-webpack-plugin");
var chalk = require("chalk")
var rm = require("rimraf")
var ora = require("ora")
var spinner = ora({
color: "green",
text: "正為生產環境打包dll包,耐心點,不然自動關機。。。"
})
spinner.start()
rm(path.resolve(__dirname, "../public"), err => {
if (err) throw err
webpack(dllConfig,function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + "
")
console.log(chalk.cyan(" dll打包完成.
"))
})
});
然后在package.json script中加上"build:dll": "node build/buildDll.js"
</>復制代碼
注:開發和生產環境都要首先使用 webpack運行webpack.dll.conf.js生成dll.js, dll.css, mainfest.json文件,每次改變庫文件也都需要重新執行一遍。
三、對比結果
優化前筆記本上打包時間為4000ms,
優化后筆記本打包時間為1800ms,同時也增加了這些庫的緩存。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83476.html
摘要:轉載文章公司的平臺功能越堆越多,打包也越來越費勁,一次十幾分鐘,運維很不爽,搗鼓了一下預編譯,試了一下大概縮短了七八分鐘,目前感覺還行,現在把它記下來,給需要的童鞋當做參考,也給自己記錄一下。 (轉載文章)公司的平臺功能越堆越多,打包也越來越費勁,一次十幾分鐘,運維很不爽,so搗鼓了一下預編譯,試了一下大概縮短了七八分鐘,目前感覺還行,現在把它記下來,給需要的童鞋當做參考,也給自己記錄...
摘要:使用打包的基本上都是獨立庫文件,這類文件有一個特性就是變化不大。修改往添加一個配置只針對的模塊化有效配置文件詳情請點擊 基于vue-cli優化的webpack配置 大概分為以下幾點 通過 externals 配置來提取常用庫,引用外鏈 配置CommonsChunkPlugin提取公用代碼 (vue-cli已做) 善用alias(vue-cli配置了一部分) 啟用DllPlugin和D...
摘要:原文地址對于沒有了解過的童鞋,建議先去看看官方的教程傳送門新版本的新特性插件使用的插件,可以很快的搭建一個項目的結構。使用時直接引入即可。的界面讓管理項目變得更加簡單。如遷移過程中有任何疑問,可以留言一起探討。 原文地址 對于沒有了解過 vue-cli3 的童鞋,建議先去看看官方的教程: 傳送門 新版本的新特性 1. 插件 使用 cli 的插件,可以很快的搭建一個項目的結構。如 ax...
摘要:搭建的項目界面想對之前較為簡潔之前的和文件夾不見了,那么應該如何配置如等的配那只需要在項目的根目錄下文件是根目錄,不是目錄語法基本路徑輸出文件目錄是否在保存的時候檢查配置配置項生產環境是否生成文件相關配置是否使用分離插件 Vue-cli3 搭建的項目 界面想對之前較為簡潔 showImg(https://segmentfault.com/img/bVbesOu?w=320&h=222)...
閱讀 2747·2021-10-11 10:57
閱讀 1574·2021-09-26 09:55
閱讀 1314·2021-09-06 15:11
閱讀 3454·2021-08-26 14:16
閱讀 673·2019-08-30 15:54
閱讀 541·2019-08-30 12:43
閱讀 3298·2019-08-29 16:18
閱讀 2575·2019-08-23 16:14
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要