vue-cli4打包最强优化 极大地减少内存 简单易懂

vue-cli4打包最强优化 极大地减少内存 简单易懂

• 打包：可以把sass编译成css，

• webpack前端化工程的开发工具，把各个模块拼接在一起

• webpack的特点：乜有可以直接修改webpack的配置文件

• 这时需要我们创建vue.config.js文件来修改webpack的配置
  

• 打包前默认是在根目录下寻找，publicPath打包后的静态资源（img，就是，css）是当前路径

• 1.配置跨域

• 我们现在 常用的就是 vue-cli4（脚手架）

• 脚手架版本与vue版本不一样

devServer: {
         proxy: {
           //配置跨域
           '/api': {
             target: 'http://120.53.31.103:84/api', // 接口的域名
             // ws: true, // 是否启用websockets
             changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
             pathRewrite: {
               '^/api': '/'
             }
           }
         }
       }
    

• 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'

一、去除生产环境sourceMap

问题： vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间

sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间。

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

• 我们第一次打包的时候在4或5M,普通的包稍微大一点的仙姑10-25M
• 性能优化上:去除sourceMap前后对比，减少了很大体积。
• 打包完成后的包会减少三分之二

还在更新…