vue webpackを使用して構築プロセスを最適化

初心:私たちのVueプロジェクトが大きい場合.あるいは、プロジェクトに多くのサードパーティライブラリが導入されている場合、npm run build構築プロジェクトを実行するときは極めて遅くなります.例えば、私の現在のプロジェクトはパッケージするたびに83 sかかります.次に、最適化されたパッケージング速度を提供する方法を示します.
resolve.modules
アイデア:webpackのresolve.modulesは、モジュールライブラリ(node_modules)を構成するために使用される場所です.jsにimport「vue」という相対的でも絶対的な経路でもない書き方が現れるとnode_modulesディレクトリを探しに行きます.デフォルトの構成では、webpackは上へ再帰的に検索します.通常、プロジェクトディレクトリにはnodeが1つしかありません.modulesは、プロジェクトのルートディレクトリにあります.検索範囲を減らすためにnode_を直接明記します.modulesのフルパス.

   build/webpack.base.conf.js   ，      ：
module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

webpack-parallel-uglify-plugin
原理:webpackはデフォルトでUglifyJSプラグインを提供してJSコードを圧縮しますが、単一スレッド圧縮コードを使用しています.つまり、複数のjsファイルを圧縮する必要があります.1つのファイルを圧縮する必要があります.したがって、正式な環境で圧縮コードをパッケージングする速度は非常に遅い(JSコードを圧縮するには、まずObjectで抽象的に表されるAST構文ツリーにコードを解析し、さらに各種の規則分析と処理ASTを適用する必要があるため、このプロセスには非常に時間がかかる).ソース:

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
  ]
}

Webpack-parallel-uglify-pluginプラグインを変更できます.UglifyJSプラグインを並列に実行でき、CPUリソースをより十分かつ合理的に使用でき、構築時間を大幅に削減できます.Webpackが複数のJSファイルを出力し圧縮する必要がある場合、UglifyJSを使用して圧縮して出力しますが、ParallelUglifyPluginプラグインは複数のサブプロセスを開き、複数のファイルを圧縮する作業をそれぞれ複数のサブプロセスに完了させますが、各サブプロセスはUglifyJsを通じてコードを圧縮します.並列処理がこの圧縮になるだけでなく,複数のサブタスクを並列に処理すると効率が向上する.

  ：npm i webpack-parallel-uglify-plugin
   build/webpack.prod.conf.js   ，      ：
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
//   webpack   UglifyJS  
    //new UglifyJsPlugin({
    //  uglifyOptions: {
    //    compress: {
    //      warnings: false
    //    }
    //  },
    //  sourceMap: config.build.productionSourceMap,
    //  parallel: true
    //}),
    //    webpack-parallel-uglify-plugin   
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS:{
        output: {
          comments: false
        },
        compress: {
          warnings: false,
          drop_debugger: true,
          drop_console: true
        }
      }
    }),

HappyPack
原理:ノードで動作するため.js上のWebpackは単一スレッドモデルなので、Webpackが処理しなければならないことは一つ一つしかできず、複数のことを一緒にすることはできません.HappyPackの処理構想は,従来のwebpackによるloaderの実行過程を単一プロセスの形式からマルチプロセスモードを拡張し,コード構築を加速させることである.

  ：npm i happypack
   build/webpack.base.conf.js   ，      ：
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        //  .js        id happyBabel  HappyPack      
        loader: 'happypack/loader?id=happyBabel',
        include: [resolve('src')],
        //  node_modules       
        exclude: /node_modules/
      },
    ]
  },
  plugins: [
    new HappyPack({
        // id    happypack       
      id: 'happyBabel',
      //         loader      
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
      }],
      //     
      threadPool: happyThreadPool,
      //   HappyPack     
      verbose: true,
    })
  ]
}

DllPluginとDllReferencePlugin
原理:我々のプロジェクト依存では、通常、大量のnpmパッケージが参照されますが、これらのパッケージは通常の開発では変更されませんが、構築のたびに繰り返し解析する必要があります.以下に説明する2つのプラグインは、このような損失を回避するために使用されます.DllPluginプラグイン:いくつかのモジュールを事前にコンパイルする役割です.DllReferencePluginプラグイン:これらの事前にコンパイルされたモジュールを参照するために使用されます.注意:DllPluginは、DllReferencePluginが実行される前に一度実行する必要があります.

1、  build        webpack.dll.conf.js   ，    （                ）：
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['vue/dist/vue.common.js',
            'vue-router',
            'axios',
            'vuex',
            'element-ui']
  },
  output: {
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'       // vendor.dll.js          
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

2、   package.json   ，        ：
    dll: webpack --config webpack.dll.conf.js
     npm run dll       vendor.dll.js。  ：                 ，       npm run dll         vendor.dll.js

3、index.html     vendor.dll.js     ：


4、   build/webpack.base.conf.js   ，          ，      DLLReferencePlugin     DllPlugin     DLL Bundle。
const webpack = require('webpack');

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  //.....
  plugins: [
     //   DllReferencePlugin  
     new webpack.DllReferencePlugin({
       context: path.resolve(__dirname, '..'),
       manifest: require('./vendor-manifest.json')
     }),
  ]
}