轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生產環境優化：code split

code split代碼分割，既將打包后的js分割成多份js文件，
方便后期實現“并行加載”、“按需加載”等，提高性能。

一、核心配置

建議使用方式二的單入口模式，并按需使用方式三。

1.1、方式一：根據入口文件進行代碼分割

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // webpack配置
    // 入口起點文件

    // 單入口
    // entry: './src/js/index.js',

    entry: {
        // 多入口：有一個入口，最終輸出就有一個bundle,多入口就有多個bundle，每個bundle會打包成一個js文件。
        main:'./src/js/index.js',
        test:'./src/js/test.js',
    },
    // 輸出
    output: {
        // 輸出文件名
        filename: 'js/[name].[contenthash:10].js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },

    // plugins的配置
    plugins: [
        // 詳細的plugins配置
        // html-webpack-plugin
        // 功能:默認會創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
        // 需求:需要有結構的HTML文件
        new HtmlWebpackPlugin({
            // 復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html',
            //壓縮 html 代碼
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注釋
                removeComments: true
            }
        }),

    ],
    // 模式  development  開發環境，production 生產環境
    // mode: 'development',
    // 生產環境下會自動壓縮js代碼
    mode: 'production',
};

核心配置

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/
    ……

    entry: {
        // 多入口：有一個入口，最終輸出就有一個bundle,多入口就有多個bundle，每個bundle會打包成一個js文件。
        main:'./src/js/index.js',
        test:'./src/js/test.js',
    },
    // 輸出
    output: {
        // 輸出文件名
        filename: 'js/[name].[contenthash:10].js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },
    
    ……
    

問題：不夠靈活，需要為每一個想要分割的js文件進行配置。

1.2、方式二：配置optimization

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // webpack配置
    // 入口起點文件

    // 單入口
    // entry: './src/js/index.js',

    entry: {
        // 多入口：有一個入口，最終輸出就有一個bundle,多入口就有多個bundle，每個bundle會打包成一個js文件。
        main:'./src/js/index.js',
        test:'./src/js/test.js',
    },

    // 輸出
    output: {
        // 輸出文件名
        filename: 'js/[name].[contenthash:10].js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },

    // plugins的配置
    plugins: [
        // 詳細的plugins配置
        // html-webpack-plugin
        // 功能:默認會創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
        // 需求:需要有結構的HTML文件
        new HtmlWebpackPlugin({
            // 復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html',
            //壓縮 html 代碼
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注釋
                removeComments: true
            }
        }),

    ],

    /* 
    可以將node_modules中代碼單獨打包成一個chunk最終輸出。
    自動分析多入口chunk中，有沒有公共的文件。如果有會打包成單獨一個chunk。
    */
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }

    // 模式  development  開發環境，production 生產環境
    // mode: 'development',
    // 生產環境下會自動壓縮js代碼
    mode: 'production',

};

核心配置

    ……
    // 單入口
    // entry: './src/js/index.js',

    entry: {
        // 多入口：有一個入口，最終輸出就有一個bundle,多入口就有多個bundle，每個bundle會打包成一個js文件。
        main:'./src/js/index.js',
        test:'./src/js/test.js',
    },
    ……
    /* 
    可以將node_modules中代碼單獨打包成一個chunk最終輸出。
    自動分析多入口chunk中，有沒有公共的文件。如果有會打包成單獨一個chunk。
    */
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
    ……

• 單入口下，可以將node_modules中代碼單獨打包成一個chunk最終輸出。
• 多入口下相比于單入口，更是能自動分析多入口chunk中有沒有公共的文件。如果有會打包成單獨一個chunk。

1.3、方式三：import動態導入

//入口文件
// ./src/index.js

import('./test')
    .then(({mul,count}) => {
        //文件加載成功~
        // eslint-disable-next-line 
        console.log(mul(2,5));
    })
    .catch(() => {
        //文件加載失敗~
        // eslint-disable-next-line 
        console.log('文件加載失敗~');
    });

核心配置

import('./xxx/xxx')
    .then(({mul,count}) => {
        //文件加載成功時執行。
        ……
    })
    .catch(() => {
        //文件加載失敗時執行。
        ……
    });

通過js代碼,讓某個文件被單獨打包成一個chunk。
import動態導入語法：能將某個文件單獨打包。

1.3.1、自定義打包的文件名

//入口文件


// 在import中加入配置信息：/* webpackChunkName: 'test' */
// 用webpackChunkName指定chunk名稱。

import(/* webpackChunkName: 'test' */'./test')
    .then(({mul,count}) => {
        //文件加載成功~
        // eslint-disable-next-line 
        console.log(mul(2,5));
    })
    .catch(() => {
        //文件加載失敗~
        // eslint-disable-next-line 
        console.log('文件加載失敗~');
    });

四、工程文件目錄

# 目錄結構
.
├── src
│   ├── index.html
│   └── js
│       ├── index.js
│       └── test.js      //希望被獨立打包的文件
└── webpack.config.js