Vue-cli项目打包越来越慢

vue-cli
webpack

#1

项目创建方式:

vue init webpack-simple project_name

最开始开发时倒不觉得如何, 现在打包时间越来越长, 而整个项目才开发1/5不到 :joy:

  1. 有什么办法可以提高打包速度吗?
  2. vue init webpack-simple 如何转到vue init webpack

#2

要不尝试一下脚手架3?


#3

需要调教 Webpack,该缓存的缓存、不用编译的别编译。

这个是 Webpack 的问题,不认为换 Vue CLI 3.0 能带来什么明显改善。


#4

@vue/cli 能直接用 vue-cli 开发的代码么?


#5

webpack不太熟, 通过vue init webpack-simple xxx创建项目后, 基本上就没动过那个文件, 能给点建议吗?

var path = require('path');
var resolve = path.resolve;
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        // path: path.resolve(__dirname, './dist'),
        path: path.resolve(__dirname, '../../webapp/dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                include: [resolve(__dirname, 'src'), resolve(__dirname, 'test'), resolve(__dirname, 'node_modules/.1.0.19@vue-echarts-v3/src')]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}


#6

调教 Webpack 是个复杂而深刻的问题。

所以才有了「Webpack 配置工程师」这么一个职位 :joy: #这是一个段子


#7

这就尴尬了, 童鞋有资料推荐么


#8

至少,先过一遍官方文档吧:

https://webpack.docschina.org/concepts/

(然后你就会放弃调教这个恶魔的念头)


总之,大体思路就是我前面说的,尽量减少 Webpack 的工作量。随着项目中的模块变得越来越多,编译时间也会无可避免地增加(虽然你这100多秒是有点夸张)。


#9

现在的问题在于webpack-simple打包后只有一个.js.map文件, 而且超大
image
访问速度也是一大问题, localhost响应时间至少5秒以上 :joy:, 至于服务器…肯定是没有localhost速度快的

现在想把这个js拆开, 兄弟有没有办法 :sweat_smile:


#10

dll,cdn都可以加快速度
按你图上来看,先去掉 map 可以快点, build 在拆分一下,拆成2-3个就够了,等到单个超过1M时,再试 cdn


#12
  • 童鞋, 拆分build.js拆分需要怎么配置呢?

#13

用 CommonsChunkPlugin 插件 手动分割
其他的可以看看我的博客:https://www.cnblogs.com/Grewer/p/9033530.html


#14

build.js.map 是webpack打包时自动生成的, 可以删除吗?


#15

可以,这个没什么太大作用,修改参数就可以不让他生成


#16

既然没什么作用, webpack干嘛要生成它 :joy:

  • 去掉的话会不会有什么副作用呢?
    对 webpack 完全小白, 还请指教

#17

build 之后,代码压缩了,出了问题不容易找到,而 map 可以定位他的位置


#18

map 文件是压缩代码到原始代码的映射。你想象一下网页加载了压缩版 JS 出了问题你怎么调试。它跟 Webpack 无关,在 Webpack 出现之前就已经存在了。


#19

看了下你的组件量,打包时间居然有130多秒(黑线。。。
照你描述的,你这个项目算一个中等项目,这么来说就不应该用webpack-simple 模板,这个模板没用过记忆不深,应该用webpack 模板的,这个才是对中大型项目做了深入优化的。
我手上一个近30页的移动端项目,刚才用cli 2 测试了下打包速度,有28秒, 然后我又用cli 3 测试了打包速度,时间没有打印出来,但是能明显感觉到打包速度提升了许多,至少减少了30%以上。
我的项目是两个星期前刚转cli 3 的,提升效果明显,官方文档也写的清楚,项目文件里也没有了之前build 等文件夹。建议你也把项目转 cli 3 。
前不久刚过了一遍webpack 英文文档(极其痛苦),能很负责任的告诉你,如果你用 cli 2 webpack模板或者是cli 3的话,你只需要关注你的代码质量和针对后期vendor 文件做优化就基本没什么大问题了。
我的项目目前打包出来就是vendor 偏大,其他基本没问题。


#20

打包时在路由入口文件配上webpackChunkName。这样打包时候,就可以分模块了。你这个是没有分模块导致的


#21

https://webpack.docschina.org/guides/code-splitting/#动态导入-dynamic-imports-