vue打包后文件体积及加载速优化

一.路由懒加载

path:'index',
component:resolve=>require(@/abc,resolve)

二.引入外部CDN

1.src/main.js
各种import部分不变，css部分可以注释掉

2.build/webpack.base.conf.js
output同级添加externals

output:{},
externals:{
    'vue':'Vue',
    'element-ui':'ELEMENT',
    'moment':'moment',
    'validator':'validator'
}

注意事项：
1).cdn 版本的 element-ui 设置的全局变量是 ELEMENT
2).如果单独引入Element会报错，因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式

3.index.html

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/validator/11.1.0/validator.min.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
    <!-- built files will be auto injected -->
</body>

注意事项：此处的js引入不能写到body、head外面，这样会导致app.js 插入到了引入的 script 的前面，否则报错’Vue is not defined’。
另外：注意cdn中js和package中的版本，是否一致

三.关闭SourceMap
路径：config/index.js

productionSourceMap: false

四.使用gzip压缩
1). 修改config/index.js 文件下 productionGzip：true ;
2). 安装依赖 npm install –save-dev compression-webpack-plugin@1.1.11 。（注：这里为啥要指定版本号呢，是因为高版本的依赖会报错，我使用的1.1.11版本是没报错）
此时运行npm run build生成的文件会有.gz后缀

同时，服务器开启gzip

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

重启nginx -s reload

五.去掉代码中的console.log
build/webpack.prod.conf.js

uglifyOptions: {
  compress: {
    warnings: false,
    drop_debugger: true,
    drop_console: true
  }
}

参考链接：https://www.jianshu.com/p/c4a9a0d4db95

铁血汉子 2019年11月17日

前端优化

0 2026