vue项目打包及cdn优化

vue项目的打包上线及优化

项目完成，我们会将项目进行上线，同时为了提升性能，我们往往会进行一些优化处理

脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包

• 打开终端，切换到项目根目录
• 输入命令：npm run build
• 会在当前项目的根目录下生成一个dist文件夹，里面就是打包后的文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8SEbzNir-1604972353525)(img\01-打包后的文件目录及文件结构.png)]

我们可以创建一个简易的node服务器来托管打包后的项目，这样就可以模拟访问服务器的项目

1.创建一个新的目录做为服务器根目录

2.将刚刚打包生成的dist目录整体拷贝到node服务器目录下

3.资源在dist目录下，所以可以使用静态资源托管的方式提供资源，将dist目录做为资源托管目录

var express = require('express') const path = require('path')  var app = express();   app.use(express.static('dist')) app.use('/', express.static(path.join(__dirname, 'dist')))  app.listen(3001, () => { console.log('http://127.0.0.1:3001') }) 

在服务器目录下输入node app.js

在浏览器中输入服务器地址

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8uIJu0w2-1604972353532)(img\02-访问服务器资源.png)]

项目打包之后，会将之前所使用到的部署依赖包和项目中使用到的外部资源都打包

如果之前引入的包很多，或者引入的不必需的包，那么会增大项目的体积，从而造成用户访问的时候需要请求更多的数据才能正常的访问，不利于用户体验，所以需要对打包过程进行优化

一般情况下我们可以从优化代码的方面对项目进行优化，也可以使用类似cdn的方式对项目进行优化

脚手架中提供了一个命令，可以让我们看到项目的资源的分布(占用)情况：npm run build – –report

• npm run build – –report

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cnn053Qu-1604972353540)(img\03-生成report页面.png)]

• 打开报告页面

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pEqmcTOw-1604972353546)(img\04-一个报告页面.png)]

  1.报告页面中，越大的块说明这个模板占用的体积越大 2.占用体积越越大的模块，我们要考虑不将其打包到产品中 

cdn: CDN的本质上是将媒体资源，动静态图片（Flash），HTML，CSS，JS等等内容缓存到距离你更近的IDC，从而让用户进行共享资源，实现缩减站点间的响应时间等等需求，而网游加速器的本质则是通过建立高带宽机房，架设多节点服务器来为用户进行加速。

我们可以将一些大体积的模块，让cdn帮我们提供相应的资源，这样就可以缓解我们自己的服务器的压力，同时提供更快更好的资源响应

在脚手架项目中，如果想增加自己的项目配置，可以在根目录下添加vue.config.js文件，在这个文件中实现自定义的配置

在打包的时候，这个配置会和脚手架的配置组合到一起

module.exports = { configureWebpack: { externals:{ 'vue': 'Vue', 'element-ui': 'ELEMENT', 'quill': 'Quill' } }, } 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kRW0kUg3-1604972353551)(img\05-添加包的排除.png)]

可以看到，打包后的项目体积显著的减少，但是，问题并没有解决，由于没有这些包，打包后的项目并不能运行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E5Waztx8-1604972353556)(img\06-项目中没有需要的依赖包.png)]

这是因为，现在打包的项目中，已经没有Vue这个包了，所以才会出现错误，我们现在需要使用cdn的方式来提供这些资源

let cdn = { css: [  'https://unpkg.com/element-ui/lib/theme-chalk/index.css',  'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css' ], js: [  'https://unpkg.com/vue/dist/vue.js',   'https://unpkg.com/element-ui/lib/index.js',   'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js' ] } 

module.exports = {  configureWebpack: { externals },  chainWebpack (config) { config.plugin('html').tap(args => { args[0].cdn = cdn return args }) } } 

• 添加css引入(head结构中）

  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link rel="stylesheet" href="<%=css%>" /> <% } %> 

• 添加js引入(body结构中)

  <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <script src="<%=js%>"></script> <% } %> 

• 重新打包，OK

在项目开发的时候，其实没有必要使用cdn,这样反而会让我们的页面加载效率下降，同时也不适合本地开发(需要连网)

我们可以根据环境变量进行相应的处理，只有在产品的时候，才让插件去自动注入相应的资源文件到html页面

const isProd = process.env.NODE_ENV === 'production'  let externals = { 'vue': 'Vue', 'element-ui': 'ELEMENT', 'quill': 'Quill' } let cdn = { css: [  'https://unpkg.com/element-ui/lib/theme-chalk/index.css',  'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css' ], js: [  'https://unpkg.com/vue/dist/vue.js',   'https://unpkg.com/element-ui/lib/index.js',   'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js' ] } cdn = isProd ? cdn : { css: [], js: [] } externals = isProd ? externals : {} module.exports = {  configureWebpack: { externals },  chainWebpack (config) { config.plugin('html').tap(args => { args[0].cdn = cdn return args }) } } 

ports = {
// 添加打包排除，说明以下配置中的包将来不会打包到项目中
configureWebpack: {
externals
},
//
chainWebpack (config) {
config.plugin(‘html’).tap(args => {
args[0].cdn = cdn
return args
})
}
}

原文链接：https://blog.csdn.net/qq_33316107/article/details/109592386?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816781667824586%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816781667824586&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-10-109592386-null-null.nonecase&utm_term=cdn