一南吮、打包優(yōu)化去掉console.log
在vue.config中花嘶，配置：
chainWebpack(config) {
? ? config.optimization.minimizer('terser').tap((args) => {
? ? ? args[0].terserOptions.compress.drop_console = true
? ? ? return args
? ? })
}
二笋籽、webpack.js配置排除打包瘦身
通過(guò)配置vue-cli把一些平常不需要用的包排除在打包文件之外。
例如:讓 webpack 不打包 vue xlsx 和 element?
先找到 vue.config.js椭员， 添加 externals 項(xiàng)车海，具體如下：
再次運(yùn)行打包，我們會(huì)發(fā)現(xiàn)包的大小已經(jīng)大幅減邪鳌： 三個(gè)包已經(jīng)不在打包的目標(biāo)文件中了侍芝。
?但是我們還要使用這些包，可以通過(guò)CDN訪問(wèn)
①具體配置-在生產(chǎn)環(huán)境時(shí)生效
在開(kāi)發(fā)環(huán)境時(shí)埋同，文件資源還是可以從本地node_modules中取出州叠，而只有項(xiàng)目上線了，才需要去使用外部資源凶赁。此時(shí)我們可以使用環(huán)境變量來(lái)進(jìn)行區(qū)分咧栗。具體如下：
在vue.config.js文件中：
let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判斷是否是生產(chǎn)環(huán)境
if (isProduction) {
? externals = {
? ? ? /**
? ? ? * externals 對(duì)象屬性解析：
? ? ? * '包名' : '在項(xiàng)目中引入的名字'
? ? */
? ? ? 'vue': 'Vue',
? ? ? 'element-ui': 'ELEMENT',
? ? ? 'xlsx': 'XLSX'
? }
? cdn = {
? ? css: [
? ? ? 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 樣式表
? ? ],
? ? js: [
? ? ? // vue must at first!
? ? ? 'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
? ? ? 'https://unpkg.com/element-ui/lib/index.js', // element-ui js
? ? ? 'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
? ? ]
? }
}
②
③注入CDN配置到html模板
之后通過(guò) html-webpack-plugin注入到 index.html之中:
chainWebpack(config) {
? config.plugin('preload').tap(() => [
? ? {
? ? ? rel: 'preload',
? ? ? fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
? ? ? include: 'initial'
? ? }
? ])
? // 注入cdn變量 (打包時(shí)會(huì)執(zhí)行)
? config.plugin('html').tap(args => {
? ? args[0].cdn = cdn // 配置cdn給插件
? ? return args
? })
? // 省略其他...
}
找到 public/index.html 通過(guò)配置CDN Config 依次注入 css 和 js。
修改head的內(nèi)容如下：
<!-- 引入樣式 -->
? ? ? <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
? ? ? ? <link rel="stylesheet" href="<%=css%>">
? ? ? ? <% } %>
? ? <!-- 引入JS -->
? ? <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
? ? ? <script src="<%=js%>"></script>
? ? <% } %>
④
