vue 應用生產環境的 webpack 打包配置優化
1. 去掉 console 列印及 debug 資訊,加快執行速度
修改 /build/webpack.prod.conf.js
檔案配置如下:
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
// 以下兩行配置,關閉 debug 和 console
drop_debugger: true,
drop_console: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
})
]
})
2. 禁止生成 map 檔案,保護原始碼,同時減小打包體積
修改 /config/index.js
檔案配置如下:
module.exports = {
build: {
/**
* Source Maps
*/
productionSourceMap: false, // 把該項的配置修改為 false,關閉 source map
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map'
}
}
3. 開啟 GZIP 壓縮,進一步壓縮 js 和 css 檔案的體積
修改 /config/index.js
檔案配置如下:
module.exports = {
build: {
// 預設情況下 Gzip 關閉,因為許多流行的靜態主機,如 Surge 或 Netlify 已經為您 gzip 所有靜態資源。
// 將其配置為 true 之前,確保執行以下程式碼安裝 compression-webpack-plugin 外掛(預設是安裝的最新版本):
// npm install --save-dev compression-webpack-plugin
productionGzip: true, // 開啟 gzip 功能
productionGzipExtensions: ['js', 'css']
}
}
修改 /build/webpack.prod.conf.js
檔案配置如下:
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
// asset: '[path].gz[query]', // 原配置報錯:ValidationError: Compression Plugin Invalid Options
filename: '[path].gz[query]', // 將asset 修改為 filename 後又報錯:TypeError: Cannot read property 'emit' of undefined,執行以下操作:npm install --save-dev [email protected]
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
修改伺服器的配置,以 Nginx
為例,找到 conf 目錄下的 nginx.conf
,開啟 gzip,並設定 gzip 的型別,如下:
gzip on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
相關推薦
vue 應用生產環境的 webpack 打包配置優化
1. 去掉 console 列印及 debug 資訊,加快執行速度 修改 /build/webpack.prod.conf.js 檔案配置如下: const webpackConfig = merge(baseWebpackConfig, { plugins
vue-cli 快速構建vue應用,實現webpack打包
一、什麼是vue-clivue-cli是由vue官方釋出的快速構建vue單頁面的腳手架。參見vue-cli官方網站。http://vuejs-templates.github.io/webpack/之前需要使用vue的單檔案元件的功能,即將不同的模板分離到不同的.vue字尾的
詳解Vue前端生產環境發布配置實戰篇
images ejs 體驗 使用入門 dem new 前端框架 listt 說明 前言 首先這篇文章是寫給Vue新手的,老司機基本不用看了。 當我們剛接觸vue的時候,特別是對於第一次用前端框架的同學來說,心情可以說是比較激動的,框架帶來的種種新體驗,是以前jQuery
vue 生產環境build打包出現空白頁面的解決方法
uil run conf htm clas -c hunk con npm vue 生產環境build打包出現空白頁面的解決方法: 如果出現:webpackjsonp is not defined 因為公共文件必須在引用js之前引用。只需要在build 文件下webpack
vue-cli+webpack打包配置
output iat lint creat clu 包含 res client sele 上一篇說的是 webpack打包生成測試和生產版本; 這篇說的這個配置 應該是在打包之前應該配置好的 webpack配置如下: 1. webpack.base.conf.js 入口文件
生產環境:tomcat9,jdk8優化配置
生產環境:tomcat9,jdk8優化配置 2018年05月20日 15:39:35 鏡水靈動 閱讀數:2320 版權宣告:本文為博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/u014172271/article/details/80381640
webpack打包速度優化
logs compress nts spl 壓縮 clas true 線程 uglifyjs 打包速度優化 Webpack 默認提供的 UglifyJS 插件,由於采用單線程壓縮,速度頗慢 ;推薦采用 webpack-parallel-uglify-plugin 插件,其做
記錄一次生產環境hadoop集群優化以及pid文件缺失處理
hadoop hbase pid 優化一、優化準備優化需要根據實際情況綜合分析1、關閉系統swap分區(如果未關閉的話)在Hadoop中,如果使用系統默認設置,會導致swap分區被頻繁使用,集群會不斷發出警告。對於每個作業處理的數據量和每個Task中用到的各種緩沖,用戶都是完全可控的。echo "v
生產環境filebeat logstash配置模板
filebeat logstash配置filebeat logstash配置模板說明為了讓不同類型的日誌記錄到不同index,實現日誌分類,需要更改默認的配置文件,ELK更新叠代速度很快,網上以前的文檔適用於之前的版本filebeat的docment_type配置項已經在6版本中棄用,請使用本文配置fileb
springboot 入門2 開發環境與生產環境採用不同配置問題
目開發中我們通常有兩套配置資訊 分別配置了我們的資料來源資訊等? 那麼我們要如何不通過修改配置檔案大量配置來實現簡單的修改與配置來實現相關配置載入功能 首先springboot 有一個核心的配置檔案appication.yml配置檔案 通常我們的所有配置都是配置在當前一
vue-cli2中的webpack打包檔案地址出錯問題
已經不是第一次遇到,結果今天還是再問了一遍我們另外一個前端小姐姐,來記錄一下。 首先放出報錯資訊: 當時反應就是,我Dev環境跑起來這麼歡快,小老弟,你測試環境你怎麼肥四啊?你揹著我把檔案存哪去了!然後想來想去去找度娘。emmm,資訊特別雜亂。那就只能靠我另
Vue.js 生產環境部署
生產環境部署 開啟生產環境模式 開發環境下,Vue 會提供很多警告來幫你對付常見的錯誤與陷阱。而在生產環境下,這些警告語句卻沒有用,反而會增加應用的體積。此外,有些警告檢查還有一些小的執行時開銷,這在生產環境模式下是可以避免的。 不使用構建工具 如果用 Vue 完整獨立版本,即直接用
vue 在生產環境中找不到背景圖片
#修改build /utils.js中的配置 if (options.extract) { return ExtractTextPlugin.extract({ u
webpack打包效能優化之路
效能優化的路沒有窮盡,只有更快。開啟頁面越快越好,點選響應越快越好。在當今這個以快為主的時代,快才是王道。閒話扯完,說正事!!! 該優化方案以最近做的一個hybrid webapp為例項演示。 路由懶載入 (1)vue-router檔案中的router使用懶載入方式。如下圖所示 (2
生產環境elasticsearch的配置建議
以下主要來自官方文件,主要分為幾塊: 硬體方面 記憶體 首先最重要的資源是記憶體,排序和聚合都可能導致記憶體匱乏,因此足夠的堆空間來容納這些是重要的。即使堆比較小,也要給作業系統快取記憶體提供額外的記憶體,因為Lucene使用的許多資料結構是
java初級應用:環境安裝及配置
相關檔案下載: jdk下載路徑:http://www.oracle.com/technetwork/java/javase/downloads/index.html eclipse下載路徑:https://www.eclipse.org/downloads/檔案安裝:
Elasticsearch 5.x 生產環境和節點配置
Elasticsearch中擁有大量的自定義配置項,除了以下一些官方不能統一進行配置的選項(與環境,使用者情況有關),大多數最好不要自行配置,因為會引起很多不必要的麻煩(不好排查),並且es的很多預設項的已經是比較優的配置(包括效能方面)。 Elastics
Webpack打包效率優化篇
Webpack基礎配置: 語法解析:babel-loader 樣式解析:style-loader css解析:css-loader less解析:less-loader 檔案解析:url-loader(file-loalder) 效能分析:webpack-bundle-analyzer 程式碼:
vue-cli 利用 webpack 給生產環境和發布環境配置不同的接口地址的三種方法
方法 -1016 開發環境 class 們的 pack json config proc 第一種方法: 在/config/dev.env.js下配置如下 在/config/prod.env.js下配置如下 已經分別設定路徑,接下來就是如何調用的問題了。 原來api文件
VUE 利用 webpack 給生產環境和發布環境配置不同的接口地址
require 調用 pro 獲取 生產環境 use 因此 exp code 我們在開發項目的時候,往往會在同一個局域網進行開發,前後端分離同時進行開發。我們前端調用後端給的接口也是在局域網內部的。但是,當項目推到線上的時候,我們會從真實服務器上獲取接口,因此,我們可能在測