いくつかのwebpackパッケージの最適化方法をまとめます

7899 ワード
webpack 先端 vue.js httml 5
なぜパッケージを最適化するのですか?
  • プロジェクトはますます大きくなり、依存パッケージはますます多くなり、パッケージファイルは大きすぎます.
  • 単ページアプリケーショントップページの白画面時間が長く、ユーザー体験差
    • 私たちの目的
  • パッケージング後のファイルサイズを小さくする
  • トップページオンデマンド導入ファイル
  • 最適化webpackパッケージ時間
    • さいてきかほうしき
    1、オンデマンドロード
    1.1ルーティングコンポーネントのオンデマンドロード
    const router = [
  {
    path: '/index',
    component: resolve => require.ensure([], () => resolve(require('@/components/index')))
  },
  {
    path: '/about',
    component: resolve => require.ensure([], () => resolve(require('@/components/about')))
  }
]

    1.2サードパーティ製コンポーネントとプラグイン.オンデマンド・ロードによるサード・パーティ・コンポーネントの導入
    //       
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

//       
import { Button } from 'element-ui'
Vue.component(Button.name, Button)

    1.3一部のプラグインについては、個別のコンポーネントでのみ使用する場合はmainで使用しなくてもよい.jsに導入するのではなく、コンポーネントにオンデマンドで導入する
    //  main.js  
import Vue from vue
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

//        
import { Vuelidate } from 'vuelidate'

    2、loader構成の最適化
  • 最適化正規マッチング
  • cacheDirectoryオプションによってキャッシュを開く
  • は、include、excludeによって処理されるファイルを低減する.
    • module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader?cacheDirectory',
      include: [resolve('src')]
    }
  ]
}

    3、ファイルパスの最適化——ファイルを検索する時間を節約する
  • extension構成後、requireまたはimportでファイル拡張子を追加する必要がなく、順次拡張子を追加してマッチングしようとします.
  • mainFilesの構成後、ファイル名を追加する必要はなく、
    • に一致するように順次追加しようとします.
  • aliasは、別名を構成することによって、webpack検索モジュールの速度を速めることができます.
    •   resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

    4、生産環境がsourceMapを閉じる
  • sourceMapは本質的にマッピング関係であり、パッケージされたjsファイルのコードはコードファイルの特定の場所にマッピングすることができ、このマッピング関係はソースコードのエラーを直接見つけるのに役立ちます.
  • パッケージング速度が遅くなり、生産ファイルが大きくなるため、開発環境はsourceMapを使用し、生産環境は閉鎖される.

    • 5、コード圧縮
  • UglifyJS:vue-cliデフォルトで使用される圧縮コード方式で、単一スレッド圧縮コードを使用しており、パッケージ時間が遅い
  • ParallelUglifyPlugin:複数のサブプロセスを開き、複数のファイルを圧縮する作業をそれぞれ複数のサブプロセスに
    • を完了する.
    2つの方法は次のとおりです.
    plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: true,
    parallel: true
  }),

  new ParallelUglifyPlugin({
    //        ，                           ，
    //cacheDir              。
    cacheDir: '.cache/',
    sourceMap: true,
    uglifyJS: {
      output: {
        comments: false
      },
      compress: {
        warnings: false
      }
    }
  })
]

    6、共通コードの抽出
  • 同じリソースが繰り返しロードされ、ユーザートラフィックが浪費され、サーバコストが増加します.
  • 各ページにロードするリソースが大きすぎて、ページの最初の画面のロードが遅くなり、ユーザー体験に影響します.

    • Webpack 3はCommonsChunkPluginの実装を使用します.
    plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function(module, count) {
      console.log(module.resource, `    ${count}`)
      //"       " + "      .js   " + "       node_modules  "
      return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, './node_modules')) === 0
    }
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    chunks: 'initial',
    minChunks: 2
  })
]

    Webpack 4はsplitChunksの実装を使用します.
    module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          priority: 1, //    
          test: /node_modules/, //                    
          chunks: 'initial', //       
          minChunks: 2 //  2            
        },
        common: {
          //     
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  }
}

    7、CDN最適化
  • プロジェクトが大きくなるにつれて、依存するサードパーティnpmパッケージが多くなり、構築後のファイルも大きくなります.
  • に加えて、1ページのアプリケーションでは、ネットワーク速度が遅い場合やサーバ帯域幅が限られている場合に長時間の白い画面が表示されます.

    • 1、vue、vue-router、vuex、element-ui、axiosの5つのライブラリを、すべてCDNリンクで取得するindexに変更する.htmlに該当するリンクを挿入します.

    2、webpack.config.jsプロファイル
    module.exports = {
 ···
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'Axios':'axios'
    }
  },

    3、 npmパッケージ、npm uninstall axios element-ui vue-router vuexをアンインストールする
    4、mainを する.jsファイルの のパッケージ 
    // import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import VueRouter from 'vue-router'

import App from './App.vue'
import routes from './router'
import utils from './utils/Utils'

Vue.use(ELEMENT)
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash', //     
  routes
})

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

    8.HappyPackマルチプロセスによるファイルの と
  • はNodeで するためである.js のWebpackは スレッドモデルなので、Webpackが しなければならないことは つ つしなければならず、 のことを にすることはできません.
  • HappyPackはWebpackに のサブプロセスにタスクを して させ、サブプロセスが された 、 をメインプロセスに することができます.
  • HappyPackはfile-loader、url-loaderのサポートに ではないので、このloaderの は されません.

    • は のとおりです.
    1、HappyPackプラグインのインストール:npm i-D happypack 2、webpack.base.conf.jsファイル module.rulesによる 
    module: {
  rules: [
    {
      test: /\.js$/,
      use: ['happypack/loader?id=babel'],
      include: [resolve('src'), resolve('test')],
      exclude: path.resolve(__dirname, 'node_modules')
    },
    {
      test: /\.vue$/,
      use: ['happypack/loader?id=vue']
    }
  ]
}

    3、 でwebpack.prod.conf.jsファイルを する
    const HappyPack = require('happypack')
//         ，       5    
const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })
plugins: [
  new HappyPack({
    //        id，      HappyPack            
    id: 'babel',
    //     .js  ，   Loader     
    loaders: ['babel-loader?cacheDirectory'],
    threadPool: HappyPackThreadPool
  }),
  new HappyPack({
    id: 'vue', //        id，      HappyPack            
    loaders: [
      {
        loader: 'vue-loader',
        options: vueLoaderConfig
      }
    ],
    threadPool: HappyPackThreadPool
  })
]

    まとめ
  • の な :オンデマンドでロードし、loader を し、 のsourceMapを じ、CDN .
  • vue-cliが った :コード 、 コード 、 は きくない.
  • プロジェクトの のニーズと の レベルに づいて を し、 によってバグが することを けなければならない.


    • webpack vue-cli H5 toast dialog npm 、 、 、 webscoket
    一次元DFT C実装
    カクテルソートアルゴリズム