vue之webpack ”一条龙“优化

打包优化

开启gzip压缩，减小js，css的体积

下载依赖

npm install compression-webpack-plugin -D

修改vue.config.js

let CompressionPlugin = require('compression-webpack-plugin');
module.exports ={
    configureWebpack: config => {
        config.plugins.push(
            new CompressionPlugin({
                test:/\.(js|css)(\?.*)?$/i,//需要压缩的正则
                threshold: 10240,//文件大小大于这个值时启用压缩
                deleteOriginalAssets: false//压缩后保留原文件
            })
        );
    }
}

使用gzip压缩打包后的js和css文件，需要Nginx中配置 gzip_static on;
配置完后打包后在dist文件夹中的js和css文件会多出zip压缩包对比源文件压缩率可以达到百分六七十左右。

插件优化

cdn加载插件：

在vue.config.js中配置忽略打包文件

module.exports ={
    chainWebpack: (config) => {
        //忽略的打包文件
        config.externals({
            'echarts':'echarts'
        })
    }
}

在public的index.html中添加script标签

<script src="<%= BASE_URL %>cdn/echarts/4.1.0/echarts.min.js" charset="utf-8"></script>

webpack自带优化选项

依赖包拆分

module.exports = {
    configureWebpack: config => {
        let optimization={
            runtimeChunk: 'single',
            splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 1638400, // 依赖包超过20000bit(2kb)将被单独打包 1638400bit(200k)
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name(module) {
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                            return `npm.${packageName.replace('@', '')}`
                        }
                    }
                }
            }
        }
        //混入配置
        Object.assign(config, {
            optimization
        });
    }
}

webpack魔法注释

使用/* webpackChunkName: "group-role" */指定打包后的chunk分组，例如：

export default [
{
  path: '/wel',
  component: Layout,
  redirect: '/wel/index',
  children: [{
      path: 'index',
      name: '首页',
      component: () =>
          import ( /* webpackChunkName: "views" */ '@/page/index')
  }]
    }, {
  path: '/statistic',
  component: Layout,
  redirect: '/statistic/index',
  children: [{
      path: 'reg-detail',
      name: '详情页',
      component: () =>
          import ( /* webpackChunkName: "utils" */ '@/views/page/log')
}
]

打包后，将会被分别装入utils.[hash code].js views.[hash coed].js中

webpack-bundle-analyzer插件 分析依赖关系

使用webpack-bundle-analyzer插件分析打包后的js大小及依赖关系

安装webpack打包分析依赖npm install -D webpack-bundle-analyzer

package.json配置script命令（如果是windows环境，需要再安装cross-env到开发依赖再添加命令）

script命令："analyz": "NODE_ENV=production npm_config_report=true npm run build"

Windows下的script命令："analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"

在vue.config.js中配置

let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    configureWebpack: config => {
        config.plugins.push(
            new BundleAnalyzerPlugin(
                {
                    analyzerMode: 'server',
                    analyzerHost: '127.0.0.1',
                    analyzerPort: 8889,
                    reportFilename: 'report.html',
                    defaultSizes: 'parsed',
                    openAnalyzer: true,
                    generateStatsFile: false,
                    statsFilename: 'stats.json',
                    statsOptions: null,
                    logLevel: 'info'
                }
            )
        );
    }
}

以上配置完成后使用npm run analyz 运行 访问127.0.0.1:8889即可看到打包后文件的依赖关系及文件的大小。
使用这个插件需要注意，如果你的公司使用自动化部署工具如jerkins，这个插件在打包完后会打开浏览器访问配置中的地址，而一般的部署环境在Linux中，这就导致部署一直卡在这一步中，部署也不报错就一直处于等待状态，在傻傻的等了一天最后发现是这个问题，配置openAnalyzer: false也无法解决，所以这个插件在本地配置跑一跑足矣，无需提交到生产环境中去