项目vue-cli4打包以及优化

目录

一、vue项目的打包：

二、项目开始前的配置：

1. 配置跨域

2. 配置 alias 别名

三、项目完成后，打包前的配置：

1. 打包前必做

2. 去除环境中的sourceMap (效果明显)

3. 去除console.log 的打印以及注释 （有插件）

4. 使用CDN 加速优化（效果明显）

5. 对资源文件进行压缩（需要与后端进行配合，效果显著，需要下载插件）

6. 图片压缩（图片多的，效果明显，有插件，且难下）

7. 只打包改变的文件（反向输出，试了就知道）

8. 公共代码抽离（反向输出，试了就知道）

9. 配置打包分析（有插件）

10. 骨架屏（有插件）

四、完整的代码展示（webpack配置）： 

---

一、vue项目的打包：

可以执行一下代码，在vue-cli中自有打包指令，进行打包，但是为了打包后的大小考虑，还需要在项目的开始前以及结束后，进行相应的操作，对项目打包进行优化，是项目的所占体积变小

npm run build    //使用npm打包
cnpm run build    //使用cnpm打包
yarn build    //使用yarn打包

二、项目开始前的配置：

在项目根路径下创建vue.config.js文件，以修改webpack配置。

1. 配置跨域

使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：

下图是跨域报错图：

该代码放在vue.config.js文件中 

module.exports = {
  devServer: {
   open: false, // 自动启动浏览器
   host: '0.0.0.0', // localhost
   port: 6060, // 端口号
   hotOnly: false, // 热更新

   overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    proxy: {
      //配置跨域
      '/api': {
        target: 'https://www.test.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
          '^/api': '/'    //代替接口的域名
        }
      }
    }
  }
}

配置好后，网址的域名请求时，例如：当我们去请求端口 http://www.test.com/v1/api/userinfo 的时候，http://www.test.com 可以被 /api 代替，变为： /api/v1/api/userinfo 来使用（如下列代码所示）

this.axios({
    url:'/api/v1/api/userinfo',    //请求的域名
    method:'get'    //请求方式
}).then(res=>{
    console.log(res)    //log查看是否请求成功
})

2. 配置 alias 别名

可以自定义常用的路径名，方便可开发中的使用。相对应于vue-cli开发中的特色：组件化

//加载path模块
const path = require('path')
//定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
  }
}

配置完成后，我们在项目中可以这样写路径

//之前这么写
import Home from '../views/Home.vue'
//配置alias别名后
import Home from 'views/Home.vue'
//也可以这么写
import Home from '@/views/Home.vue'

三、项目完成后，打包前的配置：

• 提高打包速度
• 减小项目体积、提高首屏加载速度
• 提高用户体验（骨架屏）

1. 打包前必做

对webpack的配置

module.exports = {
  publicPath: './', // 静态资源路径（默认/，打包后会白屏）
  outputDir: 'dist', // 打包后文件的目录 （默认为dist）
  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录  默认为‘’没有单独目录js/css/img在根目录中。
}

2. 去除环境中的sourceMap (效果明显)

vue项目打包之后js文件夹中，会自动生成一些map文件，即sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间。

 map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

而生产环境是不需要 sourceMap 的，如下代码可以去除

module.exports = {
  //去除生产环境的productionSourceMap
  productionSourceMap: false,
}

3. 去除console.log 的打印以及注释 （有插件）

下载插件：

cnpm install uglifyjs-webpack-plugin --save-dev

配置webpack的代码：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';

  configureWebpack: config => {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  },

4. 使用CDN 加速优化（效果明显）

cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：

 代码效果展示：