webpack4.0打包優(yōu)化策略整理小結(jié)

  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/, // 排除不處理的目錄
        include: path.resolve(__dirname, 'src') // 精確指定要處理的目錄
      }
    ]
  }

module: {
  rules: [
    {
      test: /\.js$/,
      use: 'babel-loader?cacheDirectory', // 緩存loader執(zhí)行結(jié)果 發(fā)現(xiàn)打包速度已經(jīng)明顯提升了
      exclude: /node_modules/,
      include: path.resolve(__dirname, 'src')
    }
  ]
}

const path = require('path');
function resolve(dir) { // 轉(zhuǎn)換為絕對路徑
  return path.join(__dirname, dir);
}

resolve: {
  modules: [ // 優(yōu)化模塊查找路徑
    path.resolve('src'),
    path.resolve('node_modules') // 指定node_modules所在位置 當(dāng)你import 第三方模塊時 直接從這個路徑下搜索尋找
  ]
}

// main.js

import dep1 from 'util/dep1';
import add from 'util/add';

alias: {
 Utilities: path.resolve(__dirname, 'src/utilities/'),
 Templates: path.resolve(__dirname, 'src/templates/')
}

import Utility from '../../utilities/utility';

import Utility from 'Utilities/utility';

resolve: {
  alias: { // 別名配置 通過別名配置 可以讓我們引用變的簡單
    'vue$': 'vue/dist/vue.common.js', // $表示精確匹配
    src: resolve('src') // 當(dāng)你在任何需要導(dǎo)入src下面的文件時可以 import moduleA from 'src/moduleA' src會被替換為resolve('src') 返回的絕對路徑 而不需要相對路徑形式導(dǎo)入
  }
}

alias: {
  util$: resolve('src/util/add.js')
}

import Test1 from 'util'; // 精確匹配，所以 src/util/add.js 被解析和導(dǎo)入
import Test2 from 'util/dep1.js'; // 精確匹配，觸發(fā)普通解析 util/dep1.js

resolve: {
  extensions: ['.js', '.vue']
}

// 忽略對jquery lodash的進行遞歸解析
module: {
  // noParse: /jquery|lodash/

  // 從 webpack 3.0.0 開始
  noParse: function(content) {
    return /jquery|lodash/.test(content)
  }
}

npm i happypack@next -D

const HappyPack = require('happypack');
const os = require('os'); // node 提供的系統(tǒng)操作模塊

 // 根據(jù)我的系統(tǒng)的內(nèi)核數(shù)量 指定線程池個數(shù) 也可以其他數(shù)量
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().lenght})

module: {
  rules: [
    {
      test: /\.js$/,
      use: 'happypack/loader?id=babel',
      exclude: /node_modules/,
      include: path.resolve(__dirname, 'src')
    }
  ]
},
plugins: [
  new HappyPack({ // 基礎(chǔ)參數(shù)設(shè)置
    id: 'babel', // 上面loader?后面指定的id
    loaders: ['babel-loader?cacheDirectory'], // 實際匹配處理的loader
    threadPool: happyThreadPool,
    // cache: true // 已被棄用
    verbose: true
  });
]

npm run dev

module.exports = {
  entry: {
    react: ['react', 'react-dom']
  },
  output: {
    filename: '[name].dll.js', // 動態(tài)鏈接庫輸出的文件名稱
    path: path.join(__dirname, 'dist'), // 動態(tài)鏈接庫輸出路徑
    libraryTarget: 'var', // 鏈接庫(react.dll.js)輸出方式 默認(rèn)'var'形式賦給變量 b
    library: '_dll_[name]_[hash]' // 全局變量名稱 導(dǎo)出庫將被以var的形式賦給這個全局變量 通過這個變量獲取到里面模塊
  },
  plugins: [
    new webpack.DllPlugin({
      // path 指定manifest文件的輸出路徑
      path: path.join(__dirname, 'dist', '[name].manifest.json'),
      name: '_dll_[name]_[hash]', // 和library 一致，輸出的manifest.json中的name值
    })
  ]
}

webpack --config webpack_dll.config.js --mode production

// webpack.config.js

const webpack = require('webpack');

plugins: [
  // 當(dāng)我們需要使用動態(tài)鏈接庫時 首先會找到manifest文件 得到name值記錄的全局變量名稱 然后找到動態(tài)鏈接庫文件 進行加載
  new webpack.DllReferencePlugin({
    manifest: require('./dist/react.manifest.json')
  })
]

npm i html-webpack-plugin html-webpack-include-assets-plugin -D

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');

pluings: [
  new webpack.DllReferencePlugin({
    manifest: require('./dist/react.manifest.json')
  }),
  new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src/index.html')
  }),
  new HtmlIncludeAssetsPlugin({
    assets: ['./react.dll.js'], // 添加的資源相對html的路徑
    append: false // false 在其他資源的之前添加 true 在其他資源之后添加
  });
]

cnpm i webpack-parallel-uglify-plugin -D

// webpck.config.js

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

plugins: [
  new ParallelUglifyPlugin({
    workerCount: 4,
    uglifyJS: {
      output: {
        beautify: false, // 不需要格式化
        comments: false // 保留注釋
      },
      compress: { // 壓縮
        warnings: false, // 刪除無用代碼時不輸出警告
        drop_console: true, // 刪除console語句
        collapse_vars: true, // 內(nèi)嵌定義了但是只有用到一次的變量
        reduce_vars: true // 提取出出現(xiàn)多次但是沒有定義成變量去引用的靜態(tài)值
      }
    }
  });
]

webpack --mode production

// .babelrc

{
  "presets": [
    [
      "env", {
        modules: false // 不要編譯ES6模塊
      },
      "react",
      "stage-0"
    ]
  ]
}

webpack --mode production

// funs.js
export const sub = () => 'hello webpack!';
export const mul = () => 'hello shaking!';

// main.js
import {sub} from './funs.js'

sub();

webpack --mode production //此時funs.js中沒有被用到的代碼并沒打包進來 而被剔除出去了