'优化webpack打包'

Author: Jason-chen-coder

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+/web-serve-until/node_modules
 # local env files
 .env.local
 .env.*.local

build/build.js

@@ -0,0 +1,42 @@
+'use strict';
+require('./check-versions')();
+
+process.env.OPT_TYPE = 'deploy';
+process.env.NODE_ENV = 'production';
+
+const ora = require('ora');
+const rm = require('rimraf');
+const path = require('path');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const config = require('../config');
+const webpackConfig = require('./webpack.prod.conf');
+
+const spinner = ora('building for production...');
+spinner.start();
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err;
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop();
+    if (err) throw err;
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false,
+    }) + '\n\n');
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'));
+      process.exit(1);
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'));
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n',
+    ));
+  });
+});

build/check-version.js

@@ -0,0 +1,54 @@
+'use strict';
+const chalk = require('chalk');
+const semver = require('semver');
+const packageConfig = require('../package.json');
+const shell = require('shelljs');
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim();
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node,
+  },
+];
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm,
+  });
+}
+
+module.exports = function () {
+  const warnings = [];
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i];
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement),
+      );
+    }
+  }
+
+  if (warnings.length) {
+    console.log('');
+    console.log(chalk.yellow('To use this template, you must update following to modules:'));
+    console.log();
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i];
+      console.log('  ' + warning);
+    }
+
+    console.log();
+    process.exit(1);
+  }
+};

build/thread-loader.conf

@@ -0,0 +1,30 @@
+module.exports = {
+  options: {
+    // 产生的 worker 的数量，默认是 (cpu 核心数 - 1)
+    // 或者，在 require('os').cpus() 是 undefined 时回退至 1
+    // workers: require('os').cpus() - 1,
+
+    // 一个 worker 进程中并行执行工作的数量
+    // 默认为 20
+    workerParallelJobs: 20,
+
+    // 额外的 Node.js 参数
+    workerNodeArgs: ['--max-old-space-size=4096'],
+
+    // Allow to respawn a dead worker pool
+    // respawning slows down the entire compilation
+    // and should be set to false for development
+    poolRespawn: false,
+
+    // 闲置时定时删除 worker 进程
+    // 默认为 500ms
+    // 可以设置为无穷大， 这样在监视模式(--watch)下可以保持 worker 持续存在
+    poolTimeout: 500,
+
+    // 池(pool)分配给 worker 的工作数量
+    // 默认为 200
+    // 降低这个数值会降低总体的效率，但是会提升工作分布更均一
+    poolParallelJobs: 200,
+
+  },
+};

build/utils.js

@@ -0,0 +1,100 @@
+'use strict';
+const path = require('path');
+const config = require('../config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const packageConfig = require('../package.json');
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory;
+
+  return path.posix.join(assetsSubDirectory, _path);
+};
+
+exports.cssLoaders = function (options) {
+  options = options || {};
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap,
+    },
+  };
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap,
+    },
+  };
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap,
+        }),
+      });
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return [MiniCssExtractPlugin.loader].concat(loaders);
+    } else {
+      return ['vue-style-loader'].concat(loaders);
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less', {
+      javascriptEnabled: true,
+    }),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus'),
+  };
+};
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = [];
+  const loaders = exports.cssLoaders(options);
+
+  for (const extension in loaders) {
+    const loader = loaders[extension];
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader,
+    });
+  }
+
+  return output;
+};
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier');
+
+  return (severity, errors) => {
+    if (severity !== 'error') return;
+
+    const error = errors[0];
+    const filename = error.file && error.file.split('!').pop();
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png'),
+    });
+  };
+};