vue项目的打包上线及优化

本项目是使用vue-cli脚手架完成的，对打包流程以及项目优化整理流程

vue项目的打包

• 在项目的package.json文件中，有个脚本叫：build，在终端中进行运行命令

npm run build

• 命令运行完成后，会在根目录下自动生成一文件夹 ：dist
  

项目托管

• 项目打包完成后，需要上线，现在创建一个node服务器进行托管打包的项目，模拟服务器进行访问
  • • 创建一新文件夹作为根目录创建服务器
  • • 将打包好的dist文件夹复制在服务器文件夹中
• express创建服务器

npm i express

var express = require('express')
const path = require('path')
// 2. 创建服务器
var app = express();
// 托管静态资源
// 也可以将所有静态资源放置到指定的目录下，如public,然后添加以下的配置
// app.use(express.static('dist'))
app.use('/', express.static(path.join(__dirname, 'dist')))

// 3. 开启服务器并监听端口
app.listen(3001, () => {
  console.log('http://127.0.0.1:3001')
})

启动服务器：

node app,js

在浏览器中输入端口地址访问即可

项目优化

作用：项目打包，会将所有已部署的依赖包都打包进来，部分包是全局引入，但只作用到了部分页面，造成了项目体积更大，用户访问会耗费更多的资源以及时间，使用cdn的方式进行打包，会大大缩减项目的体积

• 项目原本大小：
  

• 生成项目报告
  1、在项目终端运行命令，会自动生成dist文件夹，里面多了个report.html文件（旧的dist可以删除了）
  2、运行report.html文件，可以查看到项目中各依赖包的体积占比

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

npm run build -- --report

cdn加速优化

• 添加webpack配置 VueCLI wepack相关
  1、 在脚手架根目录下创建vue.config.js文件（文件名字必须是这个），在打包的时候，这个配置会 和脚手架的配置组合在一起
  2、在vue.config.js 中添加配置，（包的排除，这次将3个占据大的排除）

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

3、在脚手架终端中再次运行 npm run build – --report，再查看报告和文件大小，发生巨大变化


4、加速优化的问题：由于我们是将一些包排除在外，导致我们的项目运行缺少包包无法运行

5、在vue.config.js 中添加cdn的用户自定义，bootcdn官网

let cdn = {
  css: [
    // element-ui 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: [
    // vue must at first!
    'https://unpkg.com/vue/dist/vue.js', // vuejs
    // element-ui js
    'https://unpkg.com/element-ui/lib/index.js', // elementUI
    // 富文本框插件
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

6、 将cdn的资源挂载到插件上 在 vue.config.js 的 module.exports 内添加

 // 将cdn的资源挂载到插件上
  chainWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }

7、在页面中使用插件添加指定的cdn资源
添加css引入(head结构中） 循环遍历自动将所有css引入

<% 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>
<% } %>

8、设置只有产品阶段才使用cdn
因为项目开发中，没有必要使用cdn，会影响开发效率，在 vue.config.js 中写以下代码

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

10、整体优化完成，重新打包即可

整体 vue.config.js 代码如下：

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

let externals = {
  'vue': 'Vue',
  'element-ui': 'ELEMENT',
  'quill': 'Quill'
}


let cdn = {
  css: [
    // element-ui 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: [
    // vue must at first!
    'https://unpkg.com/vue/dist/vue.js', // vuejs
    // element-ui js
    'https://unpkg.com/element-ui/lib/index.js', // elementUI
    // 富文本框插件
    '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
    })
  }
}