vue项目的打包上线及优化

缺乏、安全感 2022-12-20 02:27 233阅读 0赞

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

## vue项目的打包 ##

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

npm run build

*  命令运行完成后，会在根目录下自动生成一文件夹 ：dist  
    ![在这里插入图片描述][20201109223149630.png_pic_center]

## 项目托管 ##

*  项目打包完成后，需要上线，现在创建一个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的方式进行打包，会大大缩减项目的体积

*  项目原本大小：  
    ![\- !\](https://img-blog.csdnimg.cn/20201109224744867.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ==,size\_16,color\_FFFFFF,t\_70\#pic\_center)][- _https_img-blog.csdnimg.cn_20201109224744867.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70_pic_center]
 *  生成项目报告  
    1、在项目终端运行命令，会自动生成dist文件夹，里面多了个report.html文件（旧的dist可以删除了）  
    2、运行report.html文件，可以查看到项目中各依赖包的体积占比
    
     *  报告页面中，越大的块说明这个模板占用的体积越大
     *  占用体积越越大的模块，我们要考虑不将其打包到产品中

npm run build -- --report

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70_pic_center]

### cdn加速优化 ###

*  添加webpack配置 [VueCLI wepack相关][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，再查看报告和文件大小，发生巨大变化  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70_pic_center 2]  
4、加速优化的问题：由于我们是将一些包排除在外，导致我们的项目运行缺少包包无法运行  
![在这里插入图片描述][20201109232351509.png_pic_center]  
5、在vue.config.js 中添加cdn的用户自定义，[bootcdn官网][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
        })
      }
    }

[20201109223149630.png_pic_center]: /images/20221120/4aacdd73988e4d6a85e068ad09c13e0b.png
[- _https_img-blog.csdnimg.cn_20201109224744867.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8b497bf6466f4703a4693cf211231b21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/eb4743d08046484a99eee94d811df85b.png
[VueCLI wepack]: https://cli.vuejs.org/zh/guide/webpack.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201109231619687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201109231717267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTQzMTk5OQ==,size_16,color_FFFFFF,t_70#pic_center
[20201109232351509.png_pic_center]: https://img-blog.csdnimg.cn/20201109232351509.png#pic_center
[bootcdn]: https://www.bootcdn.cn/