webpack的性能优化

webpack项目优化主要分为两个方面的优化，生产环境的代码优化和开发环境的项目构建优化

生产环境的代码优化

• 第一、首屏加载速度 --- 由于spa应用（单页应用）的特点，其首次加载白屏问题是不可避免的，我们只能通过一些方法减少白屏时间或者优化白屏时的用户体验
  1. 减少白屏时间
  • 将项目中的第三方安装包通过CDN引入

    index.html

         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
         <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
         <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
         <script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>
    

    webpack的配置文件

         config.externals = {
              'vue': 'Vue',
              'vue-router': 'VueRouter',
              'element-ui': 'ELEMENT',
              'lodash': '_'
         }
    

  • 提取提取公共依赖（new webpack.optimize.CommonsChunkPlugin("common.js")）
  • 配置html、css代码压缩
  • 开启gzip压缩（需要服务器也进行gzip的配置）
  • 优化白屏时的用户体验
    • 添加加载动画 -- 在我们的项目入口文件（index.html）中添加。

           <div id="app"><div class=loading></div></div>
      

    • 添加骨架屏（原理类似加载动画，只是把动画换成一个骨架屏）
      具体可以参考

      https://xiaoiver.github.io/coding/2017/07/30/%E4%B8%BAvue%E9%A1%B9%E7%9B%AE%E6%B7%BB%E5%8A%A0%E9%AA%A8%E6%9E%B6%E5%B1%8F.html

2. 项目打包之后vendor或者app.css文件较大
   • 将我们不经常改变版本的第三方安装包（vue、vue-router、vux、axios、loadsh等）通过cdn的方式引入
   • 将我们使用的第三方组件库的css文件也通过cdn引入
3. 代码分片实现路由懒加载
   • require.ensure([dependencies], callback,errorCalback,chunkName)

     path: 'home',
     getComponent: (nextState, cb) => {
       require.ensure([], require => {
         cb(null, require('./home'))
       })
     }
     

   • es6 的import()进行动态加载
   • Vue 的异步组件和 Webpack 的代码分割功能

     const Foo = () => import('./Foo.vue')
     { path: '/foo', component: Foo }
     

4. 优化devtool减少文件体积
   • 关闭生产环境的SourceMap（生产环境的SourceMap真心没有什么用处，如果纠结的话可以选择开启低级别的SourceMap）具体配置参考

   https://webpack.js.org/configuration/devtool/#root

开发环境的项目构建优化

1. Dllplugin提高项目构建速度
2. 热替换

        devServer: {
             contentBase: path.resolve(__dirname, 'dist'),//需要监听的文件路径
             host: '192.168.56.1',//服务器地址
             compress: true,//开启  服务器压缩
             port: 3001 // 端口
        }
   

3. 配置合适的 delvtool

   
   
4. HappyPack 配置更多的电脑资源用于项目构建

     const HappyPack = require('happypack');
     exports.module = {
          rules: [
               {
                    test: /.js$/,
                    use: 'happypack/loader'
               }
          ]
     };
     exports.plugins = [
          new HappyPack({
               loaders: [ 'babel-loader?presets[]=es2015' ]
          })
     ];