vue项目上线前优化(路由懒加载的使用,外部CDN的使用)
引
当使用vue做完项目后，接下来当然是要进行线上部署了。但是在上线之前还是可以做很多方面优化的，可以让项目上线后的体验更加哦。
若是使用了vue-cli的话，可以从面板界面直观的看到各项数据，控制台也会输出些提示信息，通过这些信息就能更好的优化项目了。
清除控制台的输出
在项目开发的时候，经常会在控制台输出些信息，方便进行调试，但是这些console.log()在上线后往往都是不需要的。如果一个个手动删掉，不仅麻烦，而且后期还要调试的时候可能也会有些不便。使用transform-remove-console插件就能比较好的解决这个问题。
- 安装插件
npm install babel-plugin-transform-remove-console --save-dev
- 在
babel.config.js中进行配置
{
"plugins": ["transform-remove-console"]
}
- 如果仅是要在开发环境中使用可以通过，判断env进行添加
// 发布模式需要用到的插件数组
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
presets: ['@vue/app'],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
],
// 发布产品时候的插件数组
...prodPlugins
]
}
路由懒加载的使用
官方说明：路由懒加载
- 使用了Babel，则需要添加
syntax-dynamic-import插件才能正常解析。可在面板中添加依赖或：
npm install --save-dev @babel/plugin-syntax-dynamic-import
- 在
babel.config.js中plugin节点添加:
"@babel/plugin-syntax-dynamic-import"
- 使用动态
import,也可以分组
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-two" */ './Baz.vue')
外部CDN的使用
在项目运行后，可以看到有些js文件非常的大，这是因为默认情况下，import导入的包，最后被webpack打包合并到一个文件了。太大的文件非常的不利于加载。这时可以配置webpack,常用的包使用外部CDN进行加载。
在vue项目中默认隐藏了对webpack的配置，要时自定义的配置需要手动的根目录创建vue.config.js进行配置。
webpack中可以通过externals节点对需要外部加载的包进行配置，在节点中的三方依赖包都不会被打包。
常用的CDN源：bootcdn staticfileCDN jsdelivr 又拍云免费JS库
当然使用这些公共的CDN更加方便，当然它们也是有故障的可能，并且也发送过故障。
vue.config.js
module.exports = {
chainWebpack: config => {
// 通过process.env.NODE_ENV对当前的环境进行判断
// 发布模式
config.when(process.env.NODE_ENV == 'production', config => {
config.entry('app').clear().add('./src/main-prod.js')
// externals指定要排除包
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
})
// 是plugin在public/index.html中添加变量
// 用以判断运行的环境是否是发布
config.plugin('html').tap(args => {
args[0].isDev = false
return args
})
})
}
public/index.html中添加要导入的CDN
<% if(!htmlWebpackPlugin.options.isDev){ %>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<% } %>
element-ui的处理
不用在externals中指定，直接在main.js中删掉导入import,然后在index.html中添加CDN。
服务端开启Gzip压缩
这里的话就要在服务器端进行配置了，比如：
在nginx中开启，要在nginx.conf中有gzip on,当然也可进行配置：
gzip on; 开启压缩
gzip_min_length 1k; 设置压缩最小单位，小于不压缩
#gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
gzip_comp_level 4; 压缩比
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 压缩内容
