firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.

Покритикуйте конфиг VUE, что можно поправить?

Основная цель домашняя страница, что смущает так это размер практически голого проекта.
Webpack Bundle Analyzer is started at 127.0.0.1:8888
Use Ctrl+C to close it
File Size Gzipped

dist\js\chunk-vendors.js 162.78 KiB 56.37 KiB
dist\js\app.js 13.50 KiB 4.81 KiB
dist\js\about.js 6.23 KiB 2.06 KiB
dist\css\app.css 1.89 KiB 0.71 KiB
dist\css\about.css 0.11 KiB 0.11 KiB

// vue.config.js
var path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    productionSourceMap: true,
    filenameHashing: false,
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\assets\/.*.css$/i,
                    use: ['style-loader', 'css-loader'],
                },
            ],
        },
        plugins: [
            new BundleAnalyzerPlugin(),
            new PrerenderSPAPlugin({
                // Required - The path to the webpack-outputted app to prerender.
                staticDir: path.join(__dirname, 'dist'),

                // Optional - The path your rendered app should be output to.
                // (Defaults to staticDir.)
                outputDir: path.join(__dirname, 'prerendered'),

                // Optional - The location of index.html
                indexPath: path.join(__dirname, 'dist', 'index.html'),

                // Required - Routes to render.
                routes: ['/', '/about'],

                // Optional - Allows you to customize the HTML and output path before
                // writing the rendered contents to a file.
                // renderedRoute can be modified and it or an equivelant should be returned.
                // renderedRoute format:
                // {
                //   route: String, // Where the output file will end up (relative to outputDir)
                //   originalRoute: String, // The route that was passed into the renderer, before redirects.
                //   html: String, // The rendered HTML for this route.
                //   outputPath: String // The path the rendered HTML will be written to.
                // }
                postProcess(renderedRoute) {
                    // Ignore any redirects.
                    renderedRoute.route = renderedRoute.originalRoute;
                    // Basic whitespace removal. (Don't use this in production.)
                    renderedRoute.html = renderedRoute.html.split(/>[\s]+</gmi).join('><');
                    // Remove /index.html from the output path if the dir name ends with a .html file extension.
                    // For example: /dist/dir/special.html/index.html -> /dist/dir/special.html
                    if (renderedRoute.route.endsWith('.html')) {
                        renderedRoute.outputPath = path.join(__dirname, 'dist', renderedRoute.route);
                    }

                    return renderedRoute;
                },

                // Optional - Uses html-minifier (https://github.com/kangax/html-minifier)
                // To minify the resulting HTML.
                // Option reference: https://github.com/kangax/html-minifier#options-quick-reference
                minify: {
                    collapseBooleanAttributes: true,
                    collapseWhitespace: true,
                    decodeEntities: true,
                    keepClosingSlash: true,
                    sortAttributes: true
                },

                // Server configuration options.
                server: {
                    // Normally a free port is autodetected, but feel free to set this if needed.
                    port: 8001
                },

                // The actual renderer to use. (Feel free to write your own)
                // Available renderers: https://github.com/Tribex/prerenderer/tree/master/renderers
                renderer: new Renderer({
                    // Optional - The name of the property to add to the window object with the contents of `inject`.
                    // injectProperty: '__PRERENDER_INJECTED',
                    // Optional - Any values you'd like your app to have access to via `window.injectProperty`.
                    //  inject: {
                    //    foo: 'bar'
                    // },

                    // Optional - defaults to 0, no limit.
                    // Routes are rendered asynchronously.
                    // Use this to limit the number of routes rendered in parallel.
                    maxConcurrentRoutes: 4,

                    // Optional - Wait to render until the specified event is dispatched on the document.
                    // eg, with `document.dispatchEvent(new Event('custom-render-trigger'))`
                    // renderAfterDocumentEvent: 'custom-render-trigger',

                    // Optional - Wait to render until the specified element is detected using `document.querySelector`
                    // renderAfterElementExists: 'my-app-element',

                    // Optional - Wait to render until a certain amount of time has passed.
                    // NOT RECOMMENDED
                    // renderAfterTime: 5000, // Wait 5 seconds.

                    // Other puppeteer options.
                    // (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
                    headless: true //  было false Display the browser window when rendering. Useful for debugging.
                })
            })
        ]
    }
};


package.json

{
  "name": "vkorotenko",
  "version": "0.2.0",
  "private": true,
  "description": "vkorotenko",
  "author": {
    "name": ""
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.1.6",
    "vue-router-plugin": "^1.0.2",    
    "vuex": "^3.3.0",
    "vuex-class": "^0.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@vue/cli-plugin-babel": "^4.3.1",
    "@vue/cli-plugin-typescript": "^4.3.1",
    "@vue/cli-service": "^4.3.1",
    "babel-loader": "^8.0.5",
    "cross-env": "^7.0.2",
    "css-loader": "^3.5.3",
    "deepmerge": "^4.2.2",
    "fibers": "^5.0.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "kind-of": "^6.0.3",
    "prerender-spa-plugin": "^3.4.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "ts-loader": "^7.0.3",
    "typescript": "~3.8.3",
    "vue-cli-plugin-vuetify": "^2.0.5",
    "vue-loader": "^15.9.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
  • Вопрос задан
  • 786 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы