оптимизация скаффолдинга webpack+react+antd

внешний интерфейс JavaScript Webpack

в предыдущей статьеИзучите особенности webpack v4, а теперь примените полученные знания на практике, чтобы оптимизировать производительность упаковки созданного ранее шаблона реагирования.

Оптимизировать категории

  • разделение стилей
  • Разделение сторонних ресурсов
  • Отличие среды разработки
  • Горячее обновление
  • Извлечь общедоступный код

1. Разделение CSS

npm install extract-text-webpack-plugin -D

webpack.config.js

Отделяйте файлы css, less и sass от связанных файлов.

+ let cssExtract = new ExtractTextWebpackPlugin({
+    filename: 'css.css',
+    allChunks: true
+ });
+ let sassExtract = new ExtractTextWebpackPlugin('sass.css')
+ let lessExtract = new ExtractTextWebpackPlugin('less.css')

Добавьте правила отдельно в webpack.config.js,

  • test: регулярное выражение, соответствующее расширению обрабатываемого файла
  • включить/исключить вручную указать папки, которые должны быть обработаны, или заблокировать папки, которые не нужно обрабатывать
{
    test: /\.css$/,
    use: cssExtract.extract({
        fallback: "style-loader",
        use: ['css-loader?minimize','postcss-loader'],
        publicPath: "/dist"
    }),
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},
{
    test: /\.scss$/,
    use: sassExtract.extract({
        fallback: "style-loader",
        use: ["css-loader?minimize","sass-loader"],
        publicPath: "/dist"
    }),
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},
{
    test: /\.less$/,
    loader: lessExtract.extract({
        use: ["css-loader?minimize", "less-loader"]
    }),
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},

Затем запустите команду webpack и сообщите об ошибке

compilation.mainTemplate.applyPluginsWaterfall is not a function

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

Исследование пришло к выводу, что причина, по которой веб-пакет был обновлен до версии 4, но соответствующий плагин не был обновлен.

Решение: Установите указанную версию зависимостей

"html-webpack-plugin": "^3.0.4"
"extract-text-webpack-plugin": "^4.0.0-beta.0"

resolve

После указания расширения вам не нужно добавлять расширение файла при запросе или импорте, он попытается добавить расширение, в свою очередь, чтобы соответствовать

resolve: {
    //引入模块的时候，可以不用扩展名
    extensions: [".js", ".less", ".json"],
    alias: {//别名
        "bootstrap": "bootstrap/dist/css/bootstrap.css"
    }
}

После настройки алиаса введение бутстрапа в основной js можно сократить как

import 'bootstrap';

npm install bootstrap@4.0.0-beta -D
npm install jquery -D
npm install popper.js -D


webpack.config.js

plugins: [
    ...
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        ...
    })
]

Отслеживание изменений файлов

Используется в режиме webpack, а не в режиме webpack-dev-server, вы можете изменить watch на false

watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作，防止文件更新太快导致编译频率太高
    poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化，默认每秒询问1000次
}

Извлечь общедоступный код

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    minChunks: 2,
                    maxInitialRequests: 5, // The default limit is too small to showcase the effect
                    minSize: 0 // This is example is too small to create commons chunks
                },
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    }

Отдельный общий код react-dom ant

  • Способ 1: внешние

Внедрите на страницу сторонние библиотеки ресурсов, а затем используйте внешние компоненты, чтобы некоторые импортированные пакеты не упаковывались в пакеты, а получали эти внешние зависимости во время выполнения (runtime).

<script src="https://cdn.bootcss.com/react/16.4.0-alpha.0911da3/cjs/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/cjs/react-dom-server.browser.production.min.js"></script>

externals: { 'react': 'React', 'react-dom': 'ReactDOM', // 提出ant design的公共资源, }
  • Способ 2: DLL

DLL есть в предыдущей статьеЯ написал это, но оно продолжает появляться после упаковки

Позже выяснилось, что ресурс не был импортирован на страницу. . . . (Я всегда думал, что он будет автоматически сгенерирован веб-пакетом на странице....)

Представлено в файле index.html.

    <script src="./vendor/react.dll.js"></script>

Разделение удалось! код выше

webpack.base.js

var path = require('path');
var webpack = require('webpack');
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')

let cssExtract = new ExtractTextWebpackPlugin({
    filename: 'css.css',
    allChunks: true
});
let sassExtract = new ExtractTextWebpackPlugin('sass.css')
let lessExtract = new ExtractTextWebpackPlugin('less.css')

module.exports = {
    entry:'./src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.[hash:8].js',
        publicPath: ''
    },
    resolve: {
        //引入模块的时候，可以不用扩展名
        extensions: [".js", ".less", ".json"],
        alias: {//别名
            "bootstrap": "bootstrap/dist/css/bootstrap.css"
        },
        modules: [path.resolve(__dirname, 'node_modules')]
    },
/*    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
        // 提出ant design的公共资源
        //'antd': 'antd',
    },*/
    devtool: 'source-map',
    devServer: {
        contentBase:path.resolve(__dirname,'dist'),
        publicPath: '/',
        port: 8080,
        hot:true,
        compress:true,
        historyApiFallback: true,
        inline: true
    },
    watch: false, //只有在开启监听模式时，watchOptions才有意义
    watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作，防止文件更新太快导致编译频率太高
        poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化，默认每秒询问1000次
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    minChunks: 2,
                    maxInitialRequests: 5, // The default limit is too small to showcase the effect
                    minSize: 0 // This is example is too small to create commons chunks
                },
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    },
    module: {
        rules:[
            {
                test: /\.js$/,
                use: {
                    loader:'babel-loader',
                    options: {
                        presets: ['env','es2015', 'react'],
                    }
                },
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test: /\.css$/,
                use: cssExtract.extract({
                    fallback: "style-loader",
                    use: ['css-loader?minimize','postcss-loader'],
                    publicPath: "/dist"
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test: /\.scss$/,
                use: sassExtract.extract({
                    fallback: "style-loader",
                    use: ["css-loader?minimize","sass-loader"],
                    publicPath: "/dist"
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test: /\.less$/,
                loader: lessExtract.extract({
                    use: ["css-loader?minimize", "less-loader"]
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test: /\.(html|htm)/,
                use: 'html-withimg-loader'
            },
            {
                test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/,
                use: {
                    loader:'url-loader',
                    options:{
                        limit: 5 * 1024,
                        //指定拷贝文件的输出目录
                        outputPath: 'images/'
                    }
                }
            }
        ]
    },
    plugins: [
        //定义环境变量
        new webpack.DefinePlugin({
            __development__: JSON.stringify(process.env.NODE_ENV)
        }),
        new CleanWebpackPlugin(['dist']),
        cssExtract,
        lessExtract,
        sassExtract,
        new HtmlWebpackPlugin({
            title: 'React Biolerplate by YuanYuan',
            template: './src/index.html',
            filename: `index.html`,
            hash: true
        }),
        new webpack.DllReferencePlugin({
            manifest: path.join(__dirname, 'vendor', 'react.manifest.json')
        }),
        new CopyWebpackPlugin([{
            from: path.join(__dirname,'vendor'),//静态资源目录源地址
            to:'./vendor' //目标地址，相对于output的path目录
        }]),
/*        new webpack.optimize.CommonsChunkPlugin({
            name: 'common' // 指定公共 bundle 的名称。
    +     })*/
        new webpack.HotModuleReplacementPlugin(), // 热替换插件
        new webpack.NamedModulesPlugin() // 执行热替换时打印模块名字
    ]
};

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');//用来合并配置文件
const base = require('./webpack.base');
let other = '';

//console.log(process.env.NODE_ENV )
if (process.env.NODE_ENV == 'development') {
    other = require('./webpack.dev.config');
} else {
    other = require('./webpack.prod.config');
}
//console.log(merge(base, other));

module.exports = merge(base, other);

webpack.prod.config.js

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    output: {
        filename: 'bundle.min.js',
    },
    plugins: [
        new UglifyJSPlugin({sourceMap: true})
    ]
}

Оригинальный адрес строительных лесов

После оптимизации адрес кадра руки

Оптимизирована скорость упаковки, улучшены файлы упаковки, преобразование прошло успешно~

Если вы думаете, что это весело, пожалуйста, обратите внимание ~ Добро пожаловать, чтобы собрать и написать комментарий ~~~

Категории