Javascript – Vue-Webpack dehnt sich nach dem Packen ungewöhnlich aus

Question

Ich habe eine Demo mit Vue erstellt. Der Code umfasst nur 300 Zeilen. Das Folgende ist die gepackte Größe. ? ? Nur eine Seite zum Lösen! Obwohl die eingeführten Pakete so groß sind, führt Element immer noch nur einige Komponenten ein. Gibt es Optimierungsmethoden?

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()
    ]
}

第二种我没有研究 - -

方案一：externals选项 就是我说 的 引入CDN，这样分布引入，会好很多。

方案二：webpack.DLLplugin

方案一：externals选项就是我说的引入CDN，这样分布引入，会好很多。