webpack生产环境优化：code split

转载请注明 来源: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