javascript - vue webpack 打包後異常膨脹

Question

用vue做了一個demo
整站就一個頁面
程式碼不過300行
這是main.js中的引入

#下面是打包後的大小

#怎麼會這麼大？？？
區區一個頁面
求解！

引入的這幾個套件原來這麼大，element還是只引入了部分元件。有沒有什麼優化方法呢？

ringa_lee · Answer

vue vue-router vuex element
這個大小還挺正常的

ringa_lee · Answer

你要把從node_modules裡面引入的模組也算進去才行啊，不然這些東西憑空冒出來麼。。
element-ui、 vue、axios你也沒算進去

为情所困 · Answer

你打包的時候，會把你所依賴的包都壓縮了，如果你不想vendor這麼大，可以分步引入CDN

方案一：externals選項就是我說的引入CDN，這樣分佈引入，會好很多。

// webpack.prod.config.js
// 多余代码省略
module.exports = {
    externals: {
        'vue': 'window.Vue',
        'vuex': 'window.Vuex',
        'vue-router': 'window.VueRouter'
        ...
    }
}

// 配置externals之后，webpack不会把配置项中的代码打包进去，别忘了需要在外部引入cdn上的js文件
// html

    
    ......

方案二：webpack.DLLplugin

webpack.dll.config.js：

// webpack.dll.config.js

// 需要打包到一起的js文件
const vendors = [
    'vue',
    'vuex',
    'vue-router',
    'axios',
    'moment',
    'vue-echarts'
];

module.exports = {
    // 也可以设置多个入口，多个vendor，就可以生成多个bundle
    entry: {
        vendor: vendors
    },

    // 输出文件的名称和路径
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, '..', 'static'),
        library: '[name]_[chunkhash]',
    },

    plugins: [
        // 这时候打包需要设置环境为production，因为像vue之类在
        // dev环境下会比prod环境多一些信息，在生产环境如果打包的是dev代码，
        // vue也会给出警告
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.DllPlugin({
            path: path.join(__dirname, '..', 'static', '[name]-manifest.json'),
            name: '[name]_[chunkhash]',
            context: __dirname
        }),
        
        // 压缩
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),

        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
}