前端webpack构建react系列三：分模块打包

最新推荐文章于 2024-05-10 12:35:45 发布

kiramario

最新推荐文章于 2024-05-10 12:35:45 发布

阅读量5.1k

点赞数

分类专栏：学习环境配置文章标签： react webpack SPA

本文链接：https://blog.csdn.net/kiramario/article/details/79836064

版权

学习同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

环境配置

10 篇文章 0 订阅

订阅专栏

分模块打包文件

在生产环境中，我们应该尽量减小JS文件的大小，将框架性的JS装载在一个文件中利用浏览器的缓存机制节约加载资源耗费时间

分块思路

1、react，react-dom这种由第三方维护的框架，一般不会进行更新。（真要更新就麻烦了，亲身经历，上级部门强制要求修复语言漏洞，硬逼着我们将某老项目php 5.6.x 更新到php7，这下有的忙了，一半多的代码挂掉了。）

2、自己编写的组建，公共方法，更新稍微频繁一点。

3、业务逻辑代码，随着产品经理的心情变化起伏不定，有一个充满变数的更新频率。

步骤

1、我们在根目录增加一个component文件夹，用于编写组建，在component文件夹内创建3个js文件，分别是component1.js，component2.js，index.js

<< component1.js >>

import React,{Component} from 'react'

class Component1 extends Component{
    render(){
        return (
            <div>
                <h5>I AM component1</h5>
            </div>
        );
    }
}

export default Component1

<< component2.js >>

import React,{Component} from 'react'

class Component2 extends Component{
    render(){
        return (
            <div>
                <h5>I AM component2</h5>
            </div>
        );
    }
}

export default Component2

<< index.js >>

export { default as Component1 } from './component1';
export { default as Component2 } from './component2';

添加component

component1 component2 index

2、修改更目录index.js。

<< index.js >>

import React,{Component} from 'react'
import { render } from 'react-dom'

import {Component1,Component2} from './component'

require("./css/main.css")

setTimeout( () => {
    alert("I am something code about business")
},5000)

class Box extends Component{
        render(){
            return (
                <div>
                    <Component1 />
                    <Component2 />
                </div>

            )
        }
}

render(
    <Box />,
    document.getElementById("main")
)

3、修改webpack.config.js
<< webpack.config.js >>

var webpack = require("webpack");
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        bundle: ['babel-polyfill','./index.js'],
        "commonFile/common": ['react','react-dom'], (1)
        "./component/component": ['./component']    (2)
    },
    output: {
        path: __dirname + '/build/', 
        filename: '[name].js',
        publicPath: "./"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,         
                loader:'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("css-loader","style-loader")
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192&name=distImg/[name].[ext]'   
            }
        ]
    },
    plugins:[
        new ExtractTextPlugin('prefixer_main.css', {
            disable: false,
            allowChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names: ["./component/component","commonFile/common"] (3)
        })
    ]
}

(1)和(2)中的键名要和(3)中的name数组值对应。
最终，webpack按照键名在output.path中生成相应的文件。例如(1)中的值[‘react’,’react-dom’]模块会被打包到output.path目录下的commonFile/common.js中，（2)中的[‘./component’] 模块会被打包到output.path下的component/component.js下。

4、在根目录执行webpack，结果在根目录生成build文件夹，build文件夹里面包含commonFile/common.js(react,react-dom)，component/component.js(component组件)，
bundle.js(业务代码)。prefixer_main.css(提取出的css文件)。

5、将index.html改为

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="./build/prefixer_main.css" type="text/css" />
</head>
<body>
    <div id='main'>11</div>
    <script src="./build/commonFile/common.js"></script>
    <script src="./build/component/component.js"></script>
    <script src="./build/bundle.js"></script>
</body>
</html>

打开index.html观察结果。

压缩js

按照以上打包方式打包后，发现我的common.js文件大的出奇，我在项目中还加上了redux等库，打包下来居然有800kb+，放在我那低配服务器上要等10s钟才能下载，gzip压缩后要稍微好一些，但是也别扭。

通过uglifyjs-webpack-plugin解决，我的webpack自带，如果没有下载一个即可。
<< webpack.config.js >>

var webpack = require("webpack");
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var uglify = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {
        bundle: ['babel-polyfill','./index.js'],
        "commonFile/common": ['react','react-dom'], (1)
        "./component/component": ['./component']    (2)
    },
    output: {
        path: __dirname + '/build/', 
        filename: '[name].js',
        publicPath: "./"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,         
                loader:'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("css-loader","style-loader")
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192&name=distImg/[name].[ext]'   
            }
        ]
    },
    plugins:[
        new ExtractTextPlugin('prefixer_main.css', {
            disable: false,
            allowChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names: ["./component/component","commonFile/common"] (3)
        }),
        new uglify()
    ]
}

重新打包后common.js压缩到了300kb，配置上gzip，秒速。

结语

由于项目整体属于SPA，所以入口文件只有一个，如果项目不适用于SPA，有多个入口文件，可以参考http://www.cnblogs.com/lvdabao/p/5944420.html

demo文件已经上传至git：https://github.com/kiramario/hello-world.git

kiramario

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端webpack构建react系列三：分模块打包

分模块打包文件在生产环境中，我们应该尽量减小JS文件的大小，将框架性的JS装载在一个文件中利用浏览器的缓存机制节约加载资源耗费时间分块思路1、react，react-dom这种由第三方维护的框架，一般不会进行更新。（真要更新就麻烦了，亲身经历，上级部门强制要求修复语言漏洞，硬逼着我们将某老项目php 5.6.x 更新到php7，这下有的忙了，一半多的代码挂掉了。）2、自己编写的...
复制链接

扫一扫