webpack打包优化

项目开始时webpack配置

vue-cli3以后，需要自己在项目根路径下创建vue.config.js文件来修改webpack配置。

一、 配置 proxy 跨域

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

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': '/'
        }
      }
    }
  }
}

二、配置 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'

项目开始打包前的webpack配置

目的：

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

打包前必须要做的

项目开发完成后，运行npm run build进行打包操作。打包前对webpack配置。

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

一、去除生产环境sourceMap

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

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

二、去除console.log打印以及注释

通过下载插件优化，减少压缩包体积不明显。

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

三、使用CDN 加速优化

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

在 public/index.html 中添加：

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
     <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

四、对资源文件进行压缩

通过下载插件进行优化

cnpm i compression-webpack-plugin -D

在vue.config.js中进行配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  // 根据你的实际情况更改这里
  publicPath,
  assetsDir: 'assets',
  lintOnSave: true,
  configureWebpack: {
    plugins:[
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        // test: /\.js$|\.html$|\.json$|\.css/,
        test: /\.js$|\.json$|\.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        // deleteOriginalAssets: true // 删除原文件
      })
    ],
  },
}

五、图片压缩

通过下载插件进行优化

npm install image-webpack-loader --save-dev

module.exports = {
  // 根据你的实际情况更改这里
  publicPath,
  assetsDir: 'assets',
  lintOnSave: true,
  // image 压缩 定义在chainWebpack中
 chainWebpack: config => {
   config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()}
}

需要注意的是此插件容易下载失败，导致运行报错

1、若安装过 image-webpack-loader 先卸载

//npm 安装的npm 则npm 移除
npm uninstall image-webpack-loader
//如果yarn安装的，则yarn 移除
yarn remove image-webpack-loader 

2、使用 cnpm , 这一步意思就是安装 cnpm 然后将全局的 registry 设置成阿里的镜像，国内阿里比较快

npm install cnpm -g --registry=https://registry.npm.taobao.org

3、使用 cnpm 安装 image-webpack-loader

cnpm install --save-dev image-webpack-loader

六、只打包改变的文件

const { HashedModuleIdsPlugin } = require('webpack');
configureWebpack: config => {    
    const plugins = [];
    plugins.push(
        new HashedModuleIdsPlugin()
    )
}

七、公共代码抽离

就是把单个页面引入的js文件抽离出来组成一个新的公共组件，自动引入。

例：

页面中有时会引入第三方模块，比如import $ from ‘jquery’;
page1中需要引用，page2中也需要引用，这时候就可以用vendor把jquery抽离出来

// 公共代码抽离
configureWebpack: config => {
//....
//优化项配置
config.optimization = {
    splitChunks: { // 分割代码块
        cacheGroups: {
            vendor: {//第三方库抽离
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,//在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0,//大于0个字节
                priority: 100//权重
            },
            common: {  //公用模块抽离
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2,在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0,//大于0个字节
                priority: 60
            },
            styles: { //样式抽离
                name: 'styles',
                test: /\.(sa|sc|c)ss$/,
                chunks: 'all',
                enforce: true
            },
            runtimeChunk: {
                name: 'manifest'
            }
        }
    }
}
}

八、配置 打包分析

通过安装插件进行配置

cnpm i webpack-bundle-analyzer -D

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  chainWebpack: config => {
    // 打包分析
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
  }
}

九、骨架屏

通过安装插件

npm install vue-skeleton-webpack-plugin

在src下新建Skeleton文件夹，其中新建index.js以及index.vue，在其中写入以下内容，其中，骨架屏的index.vue页面样式请自行编辑
在vue.config.js中配置：

//骨架屏渲染
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

//path引入
const path = require('path')

//configureWebpack模块中写入内容
// 骨架屏渲染
config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/Skeleton/index.js'),
        },
      },
      minimize: true,
      quiet: true,
      // 如果不设置那么所有的路由都会共享这个骨架屏组件
      router: {
        mode: 'hash',
        // 给对应的路由设置对应的骨架屏组件，skeletonId的值根据组件设置的id
        routes: [
	      { path: '/home', skeletonId: 'home' },
	      { path: '/list', skeletonId: 'list' },
	    ]
    }))