这篇文章给大家介绍Vue-Cli项目优化操作的实现，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联公司是一家集网站建设,东坡企业网站建设,东坡品牌网站建设,网站定制,东坡网站建设报价,网络营销,网络优化,
东坡网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
路由懒加载
在Vue-router官方文档中有针对懒加载的介绍,主要是将整个大的js进行切片，对当前路由的资源进行一个按需加载。在Vue-cli生成的路由组件引用方法是这样的
import HelloWorld from '@/components/HelloWorld'
只需将组件的引用方式改为
const HelloWorld = () =>
import ('@/components/HelloWorld')然后重新编译即可
开启预加载/优先加载
使用webpack插件 PreloadWebpackPlugin 进行预加载prefetch和优先加载preload。 主要做的是用preload加载vendor、manifest与app三个js而用prefetch去加载所有路由对应的文件。 首先要 安装插件
npm install --save preload-webpack-plugin
在 webpack.prod.conf.js 中修改，加入预加载的代码 (注意放在 new HtmlWebpackPlugin() 的下面)
new PreloadWebpackPlugin({
rel: 'prefetch',
}),
new PreloadWebpackPlugin({
rel: 'preload',
as(entry) {
if (/\.css$/.test(entry)) return 'style'
return 'script';
},
include: ['app', 'vendor', 'manifest']
})开启GZip
gzip,使用gzip压缩资源可以更快地加载资源。客户端http请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析，在http响应头，我们可以看到 content-encoding:gzip ，这是指服务端使用了gzip的压缩方式。
启用gzip,在nginx的site-conf中开启gzip
server {
gzip on;
gzip_types text/xml text/css text/plain text/javascript application/javascript application/x-javascript;
}webpack处理，需要先安装插件
npm install --save-dev compression-webpack-plugin
然后在config的index.js中 ，将productionGzip改为true，开启Gzip压缩。
PS：如果编译报错,则安装 compression-webpack-plugin@1.1.12 版本
对第三方工具库进行额外处理
本项目中Vender中主要是Vue,Vue-router,axios等固定依赖的代码,工具库的代码一般不会改动，所以可以将这些工具库的代码抽出来,单独走CDN加载以减少编译JS文件的大小。 具体操作 : 选择相应的工具库版本的cdn,加入到index.html中
之后去到webpack中修改相应的打包配置
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}关于Vue-Cli项目优化操作的实现就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
名称栏目：Vue-Cli项目优化操作的实现-创新互联
链接URL：
http://cdkjz.cn/article/cegjho.html
