vue-cli3.0相對於2.0，已經給我們優化了很多了，大家可以打開項目裏的node_modules，找到@vue/cli-serve,
這裏也說一點，如果你想更深入的瞭解vue而不僅僅是停留在應用層是一定要去看這些node_modules的。看它裏面是怎麼配置以及怎麼封裝的，學習它的思想。
正因爲3.0已經做了一些默認的配置，我們進行的進一步優化以及其它配置都放在vue.config.js裏面，這個文件是需要你手動新建的，放在根目錄。當我們運行項目的時候，cli-service(啓動服務)檢測到有這個文件就會去編譯它，應用裏面的配置。
今天重點是講解vue-cli3打包優化，下面是詳細的配置，怕大家有疑問，每一行都有註釋，覺得寫的還可以的，支持一波哈
需要申明的是，這不是一個普通的demo,這是你直接可以拿去項目裏使用的，就是這麼牛X
const path = require("path"); //路徑
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //webpack打包工具 需要安裝 npm install uglifyjs-webpack-plugin
//生產環境
const isProduction = process.env.NODE_ENV === 'production';
//引入文件的方法
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 基本路徑
publicPath: './', //publicPath代替
// 輸出文件目錄
outputDir: 'dist',
// 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
// assetsDir: "./",
// 指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑
// indexPath: './',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
devServer:{
compress: false, // 開啓壓縮
// open: true, // 自動開啓瀏覽器
//配置跨域請求
proxy:{
'/apply':{
target:'http://www.xxxx.com', //隔壁老王的服務器 (需要代理的服務器地址)
ws:true, //websocket 與後臺形成一個通道 持續的
changeOrigin:true, //是否允許跨域
pathRewrite:{ //重寫
'/apply': '/'
}
}
}
},
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
//sourceMaps是什麼（主要是方便開發人員的錯誤定位）如果爲true打包時間將會大幅度加長
sourceMap: false,
// css預設器配置項
loaderOptions: {
// pass options to sass-loader
sass: {
// 引入全局變量樣式
data: `
@import "@/assets/common/index.scss";
`
}
},
// 啓用 CSS modules for all css / pre-processor files.
modules: false,
},
// webpack配置
chainWebpack: config => {
//配置別名 不配置會報錯
config.resolve.alias
.set("@", resolve("src"))
.set("@img", resolve("src/assets/img"))
.set("@scss", resolve("src/assets/common"));
// 生產環境配置
if (isProduction) {
// 刪除預加載
config.plugins.delete('preload');
config.plugins.delete('prefetch');
// 壓縮代碼
config.optimization.minimize(true);
// 分割代碼
config.optimization.splitChunks({
chunks: 'all'
})
// 生產環境注入cdn
}
},
configureWebpack: config => {
if (isProduction) {
// 用cdn方式引入
// 爲生產環境修改配置...
config.plugins.push(
//生產環境自動刪除console
new UglifyJsPlugin({
uglifyOptions: {
compress: {
// warnings: false,
drop_debugger: true,
drop_console: true,
},
},
//是否生成sourceMap
sourceMap: false,
//使用多進程並行運行來提高構建速度
parallel: true,
})
);
} else {
// 爲開發環境修改配置...
//也可以爲測試環境配置
}
},
// 生產環境是否生成 sourceMap 文件
productionSourceMap: false,
// 啓用並行化。默認併發運行數：os.cpus().length - 1。並行化可以顯著加速構建
parallel: require('os').cpus().length > 1,
}
同一臺電腦 同一個項目 同一個環境
優化過後打包比普通打包速度快了一半
FAQ
1.還可以繼續優化的方向：a.cdn加載 b.gZip服務端壓縮 （本文爲cdn加載預留了地方，可以自己加入）
2.打包的時候，router.js 修改歷史模式爲hash模式 mode: 'hash',(可能打包完啓動項目進入空白頁)