V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
drzhaug
V2EX  ›  Node.js

菜鸟一只,请教一个 webpack+vuecli 打包体积的问题

  •  
  •   drzhaug · 2017-06-14 13:02:21 +08:00 · 4115 次点击
    这是一个创建于 2718 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最初用 vue init webpack-simple 创建了个项目, 写了一些东西,执行 npm run build 后打出了 800+kb 大小的 build.js, 不知道是什么原因它有这么大的体积,请高手指点下改进方式,谢谢了:

    以下是我的配置: <<package.json>>

    "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "iview": "^2.0.0-rc.16", "vue": "^2.3.3", }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-env": "^1.5.1", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "iview": "^2.0.0-rc.16", "node-sass": "^4.5.0", "sass-loader": "^5.0.1", "script-loader": "^0.7.0", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "vue-loader": "^12.1.0", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", "webpack-dev-server": "^2.4.5" }

    <<webpack.config.js>> var path = require('path') var webpack = require('webpack')

    module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { 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: /iview.src.?js$/, loader: 'babel-loader' }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } },
    { test: /.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /.(gif|jpg|png|woff|svg|eot|ttf)??.
    $/, use: ['url-loader']

      }
    ]
    

    }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: false } //↑devtool: '#eval-source-map' //↓module.exports.devtool = '#source-map' if (process.env.NODE_ENV === 'production') { module.exports.devtool = false // 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: false, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }

    <<index.html>> 引入一些 cdn 和本地资源, 加起来目测 100kb 左右

    <<main.js>> import Vue from 'vue' import App from './App.vue' import Modal from 'iview/src/components/modal'; import 'iview/dist/styles/iview.css' Vue.use(Modal) new Vue({ el: '#app', render: h => h(App) })

    4 条回复    2017-06-14 20:08:50 +08:00
    zhuangtongfa
        1
    zhuangtongfa  
       2017-06-14 13:28:05 +08:00
    用 vue init webpack myproject 默认打包很小的, webpack-simple 不清楚
    ChefIsAwesome
        2
    ChefIsAwesome  
       2017-06-14 13:36:19 +08:00   ❤️ 1
    https://chrisbateman.github.io/webpack-visualizer/

    用这个在线工具能分析 webpack 打包出来东西的组成。看看那个地方占的多。
    airyland
        3
    airyland  
       2017-06-14 14:29:54 +08:00
    看你用的库有没有帮你处理按需引入,或者说有没有相关的说明文档。一般直接从模块名引入都是打包了整个组件库。
    xrr2016
        4
    xrr2016  
       2017-06-14 20:08:50 +08:00
    去掉 Sourcemap 会小很多
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5263 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:30 · PVG 15:30 · LAX 23:30 · JFK 02:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.