webpack項(xiàng)目?jī)?yōu)化主要分為兩個(gè)方面的優(yōu)化，生產(chǎn)環(huán)境的代碼優(yōu)化和開(kāi)發(fā)環(huán)境的項(xiàng)目構(gòu)建優(yōu)化

生產(chǎn)環(huán)境的代碼優(yōu)化

• 第一、首屏加載速度 --- 由于spa應(yīng)用（單頁(yè)應(yīng)用）的特點(diǎn)，其首次加載白屏問(wèn)題是不可避免的，我們只能通過(guò)一些方法減少白屏?xí)r間或者優(yōu)化白屏?xí)r的用戶體驗(yàn)
  1. 減少白屏?xí)r間
  • 將項(xiàng)目中的第三方安裝包通過(guò)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代碼壓縮
  • 開(kāi)啟gzip壓縮（需要服務(wù)器也進(jìn)行g(shù)zip的配置）
  • 優(yōu)化白屏?xí)r的用戶體驗(yàn)
    • 添加加載動(dòng)畫 -- 在我們的項(xiàng)目入口文件（index.html）中添加。

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

    • 添加骨架屏（原理類似加載動(dòng)畫，只是把動(dòng)畫換成一個(gè)骨架屏）
      具體可以參考

      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. 項(xiàng)目打包之后vendor或者app.css文件較大
   • 將我們不經(jīng)常改變版本的第三方安裝包（vue、vue-router、vux、axios、loadsh等）通過(guò)cdn的方式引入
   • 將我們使用的第三方組件庫(kù)的css文件也通過(guò)cdn引入
3. 代碼分片實(shí)現(xiàn)路由懶加載
   • require.ensure([dependencies], callback,errorCalback,chunkName)

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

   • es6 的import()進(jìn)行動(dòng)態(tài)加載
   • Vue 的異步組件和 Webpack 的代碼分割功能

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

4. 優(yōu)化devtool減少文件體積
   • 關(guān)閉生產(chǎn)環(huán)境的SourceMap（生產(chǎn)環(huán)境的SourceMap真心沒(méi)有什么用處，如果糾結(jié)的話可以選擇開(kāi)啟低級(jí)別的SourceMap）具體配置參考

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

開(kāi)發(fā)環(huán)境的項(xiàng)目構(gòu)建優(yōu)化

1. Dllplugin提高項(xiàng)目構(gòu)建速度
2. 熱替換

        devServer: {
             contentBase: path.resolve(__dirname, 'dist'),//需要監(jiān)聽(tīng)的文件路徑
             host: '192.168.56.1',//服務(wù)器地址
             compress: true,//開(kāi)啟  服務(wù)器壓縮
             port: 3001 // 端口
        }
   

3. 配置合適的 delvtool

   
   
4. HappyPack 配置更多的電腦資源用于項(xiàng)目構(gòu)建

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