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

作者: 都江堰古巨基 | 来源:发表于2019-07-19 14:42 被阅读0次

减小vue、element-ui打包后的文件大小
webpack脚手架优化
【2019-PyQT5】Pyqt4 update Pyqt5
vue项目打包分离element-ui，减小vendor包
vue 打包减小体积
vue打包优化
azeqjz Linux笔记
2019-12-15
在vue-cli中使用element-ui项目打包后图标不显示的
import 'element-ui/lib/theme

具体思路是通过将element-ui、vue等常用的包使用外链的方式部署
操作如下：
1、修改index.html页面，再head中引入cdn。

引入cdn.png

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

  externals: {
    vue: 'Vue',
    element: 'ElementUI',
  },

注意.png

3.删除main.js中的相应import from。因为如果不删除，打包的时候还会把这两个文件打进去

打包的时候删掉引入.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 => {
        // 开启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',
                // 这个地方如果和mian.js一起改为elementUI这种小写的，就会报错找不到，原因未知
                "element-ui": "ELEMENT"
            }
        }
    },
    // 开发服务器代理转发：
    devServer: {
        proxy: {
            '/api':{
                target:'http://localhost:3001/api',
                changeOrigin: true,
                pathRewrite:{
                  '/api':''
                }
            }
        }
    },

    assetsDir: 'static',

    indexPath: 'index.ejs',
}

index.html中的内容：
<!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" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <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>个人小站</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>