vuecli 3パッケージ仕様

VUECLIを使用するプロジェクトのパッケージがオンラインになったとき、パッケージは大きく、jsもcssもchunk-vendorsにあることが分かった.jsとchunk-vendors.cssファイルの下.VUECLI 3に統合されたwebpack 4は、オンデマンド導入などのパッケージ作業を手伝ってくれますが、開発の過程ではまだ十分ではありません.最近のシロの開発過程で行われたパッケージ操作を簡単に説明します.
1.最も重要なのは最も基本的な操作であり、mapファイルをvueに生成しない.config.jsファイル(プロジェクトルートディレクトリの下で手動で新規作成されていない場合)で構成

module.exports = {
	//      sourceMap
	productionSourceMap:false
}

mapファイルの役割:プロジェクトのパッケージ化後、コードはすべて圧縮暗号化され、実行時にエラーが発生した場合、出力されたエラー情報はどこのコードがエラーを報告したのか正確に知ることができません.mapがあれば暗号化されていないコードのように、正確な出力がどの行のどの列に間違っているかを知ることができます.
2.ルーティングベースの動的ロード

//   AMD     require    
const Home = resolve => require(['./Home.vue'], resolve);
//  
const router = new VueRouter({
  routes: [
    { 
    	path: '/home', 
    	component: Home 
    }
  ]
}) 

もちろんルーティングのグループ化(コンポーネントをブロック化)もできます

// require.ensure   Webpack      ，     code-split point
const Home = r => require.ensure([], () => r(require('./Home.vue')), 'group-foo')
const Login = r => require.ensure([], () => r(require('./Login.vue')), 'group-foo')

もちろん、webpackが2.4より大きい場合は、requireの代わりにvueでimport()を使用することを参照してください.Ensure()コードパッケージング分離を実現
3.コンポーネントオンデマンドロード現在のコンポーネントの多くはすでに実装されており、例えば私の前のvuecli 3 elementオンデマンドロードオンデマンド導入(スタイルを含む)について説明しています.
4.サーバーオープンGzip(vue-cli 3.0はすでにオープンしており、これは注目する必要はありません)5.CDNアクセラレータを有効にし、vue、vuex、routerなどの静的リソースをサーバにロードします.6.Bundle splittingインストールプラグイン

npm install uglifyjs-webpack-plugin -S

vueを変更します.config.jsファイル

const path = require("path");
const UglifyPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  lintOnSave: false, // eslint-loader           
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // webpack  
  // eslint-disable-next-line no-unused-vars
  chainWebpack: config => {},
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      //          ...
      config.mode = "production";
      //             js  
      let optimization = {
        runtimeChunk: "single",
        splitChunks: {
          chunks: "all",
          maxInitialRequests: Infinity,
          minSize: 20000,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(
                  /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                )[1];
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace("@", "")}`;
              }
            }
          }
        },
        minimizer: [
          new UglifyPlugin({
            uglifyOptions: {
              compress: {
                drop_console: true, // console
                drop_debugger: false,
                pure_funcs: ["console.log"] //   console
              }
            }
          })
        ]
      };
      Object.assign(config, {
        optimization
      });
    } else {
      //          ...
      config.mode = "development";
    }
    Object.assign(config, {
      //         
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
          "@c": path.resolve(__dirname, "./src/components"),
          "@p": path.resolve(__dirname, "./src/pages")
        } //     
      }
    });
  },
  productionSourceMap: false, //          sourceMap   
  // css    
  css: {
    extract: true, //     css     ExtractTextPlugin
    sourceMap: false, //    CSS source maps?
    loaderOptions: {
      css: {}, //           css-loader
      postcss: {} //           postcss-loader
    }, // css      
    modules: false //    CSS modules for all css / pre-processor files.
  },
  parallel: require("os").cpus().length > 1 //     Babel   TypeScript    thread-loader。        CPU             ，        。
};

参考Webパフォーマンスの最適化:Webpackを使用してデータを分離する正しい方法