減小vue、element-ui打包后的文件大小

原文在這里

具體思路是通過(guò)將element-ui、vue等常用的包使用外鏈的方式部署
操作如下:
1、修改index.html頁(yè)面,再head中引入cdn。


引入cdn.png

2.修改webpack.base.conf.js文件中的module.exports 添加externals配置:

  externals: {
    vue: 'Vue',
    element: 'ElementUI',
  },
注意.png

3.刪除main.js中的相應(yīng)import from。因?yàn)槿绻粍h除,打包的時(shí)候還會(huì)把這兩個(gè)文件打進(jìn)去

打包的時(shí)候刪掉引入.png

更新Vue-cli 3.0 (2019年3月30日):

在Vue-cli 3.0中使用cdn加速的方法:

在根目錄中新建vue.config.js:

'use strict'

const CompressionPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    outputDir: "../dist",
    configureWebpack: config => {
        // 開(kāi)啟Gzip壓縮
        if (isProduction) {
            config.plugins.push(new CompressionPlugin({
                algorithm:'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }))
            // 排除掉要使用cdn的包:
            config.externals = {
                vue: "Vue",
                axios: 'axios',
                // 這個(gè)地方如果和mian.js一起改為elementUI這種小寫(xiě)的,就會(huì)報(bào)錯(cuò)找不到,原因未知
                "element-ui": "ELEMENT"
            }
        }
    },
    // 開(kāi)發(fā)服務(wù)器代理轉(zhuǎn)發(fā):
    devServer: {
        proxy: {
            '/api':{
                target:'http://localhost:3001/api',
                changeOrigin: true,
                pathRewrite:{
                  '/api':''
                }
            }
        }
    },

    assetsDir: 'static',

    indexPath: 'index.ejs',
}
index.html中的內(nèi)容:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" >
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <title>個(gè)人小站</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but fronted doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
  </body>
</html>

最后編輯于
?著作權(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)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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