webpack 构建速度

使用webpack进行模块化的时候,打包速度太慢,在查阅资料后大家土建使用DllPlugin+happypack的方式进行打包,可是我按照网上的流程构建完之后并没有提升打包速度,求大神告知我的问题在哪?这是我的代码
webpack.dll.config.js

const webpack           = require('webpack');
const path              = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        vendor: ['vue', 'vue-router']
    },
    output: {
        path: path.join(__dirname,'/dist/'),
        filename: '[name].dll.js',
        library: '[name]' // 必填项,将此dll包暴露到window上,给app.js调用
    },
    plugins: [
        new webpack.DllPlugin({
            context: __dirname, // 必填项,用来标志manifest中的路径
            path: './config/manifest.json', // 必填项,存放manifest的路径
            name: '[name]' // 必填项,manifest的name
        }),
        new HtmlWebpackPlugin({ // 利用该插件实现vendor被插入到html中
            filename: path.join(__dirname, '/index.html'),
            template: path.join(__dirname, '/index.html'),
            inject: 'body',
            hash: true
        })
    ]
};

webpack.config.js的部分代码

  module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'happypack/loader?id=happyvue'
            },
            {
                test: /\.js$/,
                loader: 'happypack/loader?id=happybabel',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'happypack/loader?id=happyfile',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./config/manifest.json") // eslint-disable-line
        }),
        new HappyPack({
            id: 'happyvue',
            loaders: ['vue-loader'],
            threadPool: happyThreadPool,
            cache: true,
            verbose: true
        }),
        new HappyPack({
            id: 'happybabel',
            loaders: ['babel-loader'],
            threadPool: happyThreadPool,
            cache: true,
            verbose: true
        }),
         new HappyPack({
            id: 'happyfile',
            loaders: ['file-loader'],
            threadPool: happyThreadPool,
            cache: true,
            verbose: true
        })
    ],

使用的是vue框架,,跪求大神解答!!

阅读 2.4k
1 个回答

我感觉happypack提升也不大

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题