webpack打包優(yōu)化（vue）

:使用 vue-cli 自動(dòng)構(gòu)建的項(xiàng)目，沒(méi)有webpack的設(shè)置文件；需要更改webpack 設(shè)置可以在vue.config.js中進(jìn)行修改

configureWebpack：返回一個(gè)對(duì)象

chainWebpack：函數(shù)的鏈?zhǔn)讲僮?/p>

const?ScriptExtHtmlWebpackPlugin?=?require('script-ext-html-webpack-plugin')

const?path?=?require('path')

function?resolve(dir){

??return?path.join(__dirname,dir)

}

module.exports?=?{

publicPath:?'./',?//?router?hash?模式使用

??outputDir:?'dist',//輸出內(nèi)容的文件夾

??assetsDir:?'static',//編譯內(nèi)容的文件夾

??productionSourceMap:?false,//?打包時(shí)不會(huì)生成?.map?文件，加快打包速度?

??lintOnSave:?false?,//關(guān)閉格式檢查

??devServer:?{ // 開(kāi)發(fā)服務(wù)器

????host:?needHost,

????port:?port,

????open:?false,

????overlay:?{

??????warnings:?false,

??????errors:?true

????},

????proxy:?{

??????'/api':?{

????????target:?'xxxxxxx',

????????secure:?false,

????????changeOrigin:?true,?//是否跨域

????????logLevel:?'debug',

????????pathRewrite:?{

??????????'^/api':?''?//?pathRewrite?表示的意思是?把/api?替換為空

????????}

??????}

????}

??},

??configureWebpack:?{

??????optimization:?{

????????runtimeChunk:?true

????},

? ? ?plugins:?[

? ? ? ?new?ScriptExtHtmlWebpackPlugin({

? ? ? ? ?inline:?/runtime~.+\.js$/??//正則匹配runtime文件名

? ? ? ?})

? ? ?]

??},

??chainWebpack:?config?=>?{

//?set?preserveWhitespace??

??config.module? ? ?

?.rule('vue')? ? ?

?.use('vue-loader')?

?.loader('vue-loader')? ? ??

.tap(options?=>?{? ? ? ??

options.compilerOptions.preserveWhitespace?=?true? ? ? ?

?return?options? ? ?

?})??????.end()

?config.when(process.env.NODE_ENV?===?'development',?config?=>?config.devtool('cheap-source-map')) // 設(shè)置調(diào)試查看源代碼

????config.optimization.splitChunks({

??????chunks:'all',

??????cacheGroups:{

????????commons:{

??????????name:'chunk-commons',

??????????test:resolve('src/components'),

??????????minChunks:3,

??????????priority:5,

??????????reuseExistingChunk:true

????????},

????????libs:{

??????????name:'chunk-libs',

??????????chunks:'initial',

??????????test:/[\\/]node_modules[\\/]/,

??????????priority:10

????????}

??????}

????})

????config.plugin('preload')

??????.tap(args?=>?{

????????args[0].fileBlacklist.push(/runtime~.+\.js$/)?//正則匹配runtime文件名，去除該文件的preload

????????return?args

??????})

??}

}

工具模塊

const?path?=?require('path')

function?resolve(dir){

return?path.join(__dirname,dir)

}

基礎(chǔ)配置

publicPath:?'./',?//?router?hash?模式使用

??outputDir:?'dist',//輸出內(nèi)容的文件夾

??assetsDir:?'static',//編譯內(nèi)容的文件夾

??productionSourceMap:?false,//?打包時(shí)不會(huì)生成?.map?文件，加快打包速度?

??lintOnSave:?false?,//關(guān)閉格式檢查

開(kāi)發(fā)服務(wù)器代理

??devServer:?{ // 開(kāi)發(fā)服務(wù)器

????host:?needHost,

????port:?port,

????open:?false,

????overlay:?{

??????warnings:?false,

??????errors:?true

????},

????proxy:?{

??????'/api':?{

????????target:?'xxxxxxx',

????????secure:?false,

????????changeOrigin:?true,?//是否跨域

????????logLevel:?'debug',

????????pathRewrite:?{

??????????'^/api':?''?//?pathRewrite?表示的意思是?把/api?替換為空

????????}

??????}

????}

??},

快捷引用

// resolve.alias 設(shè)置引入別名
config.resolve.alias

??????.set('@',?resolve('src'))

??????.set('assets',?resolve('src/assets'))

??????.set('api',?resolve('src/api'))

??????.set('views',?resolve('src/views'))

??????.set('components',?resolve('src/components'))

preserveWhitespace??

vue打包保留標(biāo)簽的空白

cheap-source-map

根據(jù)環(huán)境變量， 設(shè)置調(diào)試查看源代碼

/*

? source-map:? 一種 提供源代碼到構(gòu)建后代碼映射 技術(shù) （如果構(gòu)建后代碼出錯(cuò)，可以通過(guò)映射追蹤到源代碼錯(cuò)誤）

? 格式：[inline- | hidden- | eval-][nosources-][cheap-[module-]]source-map

? ? 可以任意排列，但[]的順序不能亂

? 具體介紹

? source-map: 在外部生成一個(gè)文件

? ? 在控制臺(tái)會(huì)顯示 錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置

? inline-source-map: 內(nèi)嵌到bundle.js中

? ? 只生成一個(gè)source-map

? ? 在控制臺(tái)會(huì)顯示 錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置

? hidden-source-map: 外部

? ? 錯(cuò)誤代碼錯(cuò)誤原因，源代碼的錯(cuò)誤位置

? ? 不能追蹤源代碼錯(cuò)誤，只能提示到構(gòu)建后代碼的錯(cuò)誤位置

? eval-source-map： 內(nèi)嵌

? ? 每一個(gè)文件都生成對(duì)應(yīng)的source-map

? ? 錯(cuò)誤代碼準(zhǔn)確信息，源代碼的錯(cuò)誤位置

? nosources-source-map: 外部

? ? 錯(cuò)誤代碼準(zhǔn)確信息，沒(méi)有任何源代碼信息

? cheap-source-map: 外部

? ? 錯(cuò)誤代碼準(zhǔn)確信息，源代碼的錯(cuò)誤位置

? ? 只能精準(zhǔn)到行

? cheap-module-source-map: 外部

? ? 錯(cuò)誤代碼準(zhǔn)確信息，源代碼的錯(cuò)誤位置

? ? module會(huì)將loader的source-map加入

? ? 內(nèi)嵌與外部的區(qū)別： 1.外部生成單獨(dú)的文件，內(nèi)嵌沒(méi)有 2.內(nèi)嵌構(gòu)建速度快

? ? 這么多source-map如何選擇？

? ? 開(kāi)發(fā)環(huán)境：速度快，調(diào)試更友好

? ? ? 速度快（ eval>inline>cheap>··· ）

? ? ? ? 組合eval-cheap-source-map > eval-source-map

? ? ? 調(diào)試更友好

? ? ? ? source-map > cheap-module-source-map > cheap-source-map

? ? ? 最終結(jié)果：cheap-module-source-map 和 eval-source-map (vuecli與react腳手架默認(rèn))

? ? 生產(chǎn)環(huán)境：源代碼要不要隱藏？調(diào)試要不要更友好

? ? ? 內(nèi)嵌會(huì)讓代碼體積變大，所以在生產(chǎn)環(huán)境下不用內(nèi)嵌

? ? ? nosources-source-map? 全部隱藏

? ? ? hidden-source-map? 只隱藏源代碼，會(huì)提示構(gòu)建后代碼錯(cuò)誤信息

? ? ? 最終結(jié)果：source-map 和 cheap-module-source-map

*/

runtimeChunk

根據(jù)路由驅(qū)動(dòng)頁(yè)面的 runtime 代碼默認(rèn)情況是包含在 build 后的 app.hash.js 內(nèi)的，如果我們改動(dòng)其他路由，就會(huì)導(dǎo)致 runtime 代碼改變。從而不光我們改動(dòng)的路由對(duì)應(yīng)的頁(yè)面 js 會(huì)變，含 runtime 代碼的 app.hash.js 也會(huì)變，對(duì)用戶體驗(yàn)是非常不友好的。

為了解決這個(gè)問(wèn)題要設(shè)定 runtime 代碼單獨(dú)抽取打包;

script-ext-html-webpack-plugin

但是 runtime 代碼由于只是驅(qū)動(dòng)不同路由頁(yè)面的關(guān)系，代碼量比較少，請(qǐng)求 js 的時(shí)間都大于執(zhí)行時(shí)間了，所以使用 script-ext-html-webpack-plugin 插件將其內(nèi)鏈在 index.html 中比較友好。所有這兩個(gè)一般配合使用。

configureWebpack：

optimization:?{

????????runtimeChunk:?true

????},

????plugins:?[

??????new?ScriptExtHtmlWebpackPlugin({

????????inline:?/runtime~.+\.js$/??//正則匹配runtime文件名

??????})

????]

chainWebpack：

??config

????.plugin('ScriptExtHtmlWebpackPlugin')

????.after('html')

????.use('script-ext-html-webpack-plugin',?[

??????{

????????//?`runtime`?must?same?as?runtimeChunk?name.?default?is?`runtime`

????????inline:?/runtime\..*\.js$/

??????}

????])

????.end()

????config.optimization.runtimeChunk('single')

splitChunks

如果使用了某些長(zhǎng)期不會(huì)改變的庫(kù)，像 element-ui ，打包完成有 600 多 KB ，包含在默認(rèn) vendor 中顯然不合適，每次用戶都要加載這么大的文件體驗(yàn)不好，所以要單獨(dú)打包：

chainWebpack:

?config.optimization.splitChunks({

????????chunks:?'all',

????????cacheGroups:?{

??????????commons:?{

????????????name:?'chunk-commons',

????????????test:?resolve('src/components'),?//?can?customize?your?rules

????????????minChunks:?3,?//??minimum?common?number

????????????priority:?5,

????????????reuseExistingChunk:?true

??????????},

??????????libs:?{

????????????name:?'chunk-libs',

????????????chunks:?'initial',?//?only?package?third?parties?that?are?initially?dependent

????????????test:?/[\\/]node_modules[\\/]/,

????????????priority:?10

??????????},

??????????elementUI:?{

????????????name:?'chunk-elementUI',

????????????priority:?20,

????????????test:?/[\\/]node_modules[\\/]_?element-ui(.*)/

??????????},

????????}

??????})

preload 預(yù)加載

提前預(yù)加載提高切換路由的體驗(yàn)

config.plugin('preload').tap(() => [

? ? ? {

? ? ? ? rel: 'preload',

? ? ? ? fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],

? ? ? ? include: 'initial'

? ? ? }

? ? ])

? ? config.plugins.delete('prefetch')

這里要把 runtime 代碼的 preload 去掉。

環(huán)境配置

.env.production 線上環(huán)境打包 // vue-cli-service serve?

.env.test? 測(cè)試環(huán)境打包 // vue-cli-service test:unit

.env.development 開(kāi)發(fā)環(huán)境打包? // vue-cli-service build 和 vue-cli-service test:e2eo

.emv.staging 使用mode 打包? -- vue-cli-service -- mode staging

.env.local. 本地環(huán)境變量，會(huì)被 git 忽略上傳

環(huán)境變量

NODE_ENV、BASE_URL、VUE_APP_? 開(kāi)頭的變量才能通過(guò) webpacl.DefinePlugin靜態(tài)的嵌入到客戶端的代碼中

?html-webpack-plugin

會(huì)處理 public/index.html 文件。在構(gòu)建過(guò)程中，資源鏈接會(huì)被自動(dòng)注入。

可以配置多頁(yè)面入口:

{

? entry: 'index.js',

? output: {

? ? path: __dirname + '/dist',

? ? filename: 'index_bundle.js'

? },

? plugins: [

? ? new HtmlWebpackPlugin(),?

? ? new HtmlWebpackPlugin({??

? ? ? filename: 'test.html',

? ? ? template: 'src/assets/test.html'

? ? })

? ]

}

可以修改默認(rèn)參數(shù)：

Options:{

title:

filename:

.....

}

config導(dǎo)出

導(dǎo)出vue默認(rèn)webpack設(shè)置

vue inspect > output,js

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容