V
V
Vladimir Korotenko2020-05-09 22:04:32
webpack
Vladimir Korotenko, 2020-05-09 22:04:32

Criticize the VUE config, what can be fixed?

The main purpose of the homepage, what is confusing is the size of the almost bare project.
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"
  ]
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question